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Preface 



Le motion design se definit par 1' ensemble des signes fixes et animes qui caracterisent 
1' identite d'un site et au service de son contenu. Ces signes et ces formes vehiculent une 
identite par des animations distributes dans un scenario sur une echelle de temps lineaire. 
Par cette organisation plastique et semantique, ils en appuient le sens degage. 

Pour offrir une identite qui puisse evoluer selon la configuration et le comportement de 
l'utilisateur, une identite evolutive, reactive et applicative, il est incontournable de la reali- 
ser en ActionScript. Nous parlons alors de motion design en ActionScript. Nous pourrions 
parler aussi de script design, mais le terme n'est pas vraiment usuel. 

Pour cela, nous disposons de plusieurs versions du langage ActionScript. II convient natu- 
rellement d'aborder la version qui offre la reponse la plus appropriee au besoin defini par le 
concepteur du site. Trois versions de ce langage sont apparues successivement depuis la fin 
des annees 90 et continuent d'exister chacune independamment des autres : 

• ActionScript 1.0 est utilise pour le Web mobile et les sites de premiere generation. II n'est 
presque plus employe pour la creation de sites Internet classiques car il est trop restreint 
en fonctionnalites. Son lecteur est leger d'ou l'interet conserve pour sa portability. 

• ActionScript 2.0 offre une palette de comportements bien plus etoffee et demeure 
encore largement employe pour bon nombre des creations de sites dits vitrines, n'expri- 
mant pas un grand besoin de reactivite ni de fonctionnalites. Son apprentissage est 
encore relativement accessible et son lecteur est deja deploye sur de nombreux appareils 
mobiles. 

• ActionScript 3.0, apparu depuis Flash CS3 (Flash 9), permet de realiser des applica- 
tions complexes avec une grande reactivite. Concernant la partie graphique, elle 
autorise principalement la 3D et la gestion de la video en haute definition, ainsi que le 
developpement d'applicatifs lourds comme le traitement des images, gourmands en 
calculs. Si le langage semble plus complexe au premier abord, il n'en est rien dans la prati- 
que, car en realite, la multiplication des lignes de code requise en AS3 vient de la neces- 
sity de detailler le contexte d'utilisation de chaque action. Ceci afin de reserver l'espace 
memoire uniquement requis pour les animations, et done, d'en ameliorer les performances 
a l'affichage. Mais les actions elles-memes restent souvent equivalentes a celles deja 
utilisees en AS2. D'autres modifications d'ordre structural ont, cela dit, ete apportees en 
AS3, qu'il est necessaire d'apprivoiser, surtout lorsque Ton a acquis des habitudes de 
developpement tranquilles, encore possibles en AS2. 

Ce livre a pour objectif de vous permettre d'acquerir facilement les notions d' Action- 
Script 3 necessaires pour vous rendre independant dans le developpement d' interfaces 
riches et graphiques, a partir de symboles places dans le scenario. II vous permettra aussi de 
contourner les problemes eventuellement rencontres suite aux modifications structurelles 
induites par ce nouveau langage, notamment si vous utilisiez deja AS2 et aviez pris 
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1' habitude de dialoguer facilement d'un document SWF a un autre. Ainsi, en plus des prin- 
cipals fonctionnalites deja evoquees comme la 3D et la video en haute definition, vous 
apprendrez a imbriquer des animations SWF entre elles, mais en sachant reellement les 
faire interagir l'une envers 1' autre. Vous apprendrez egalement a afncher et masquer des 
informations, mais en connaissant comment desactiver les contenus supprimes alors qu'ils 
demeurent intrinsequement encore actifs. Vous verrez autant d'autres principes inherents a 
AS3 qu'un ouvrage plus scolaire ne vous aurait pas permis de controler et qu'un livre trop 
technique vous aurait decourage de decouvrir. 

Cet ouvrage, oil nous abordons les specificites graphiques d AS3 et quelques principes deja 
presents avec AS2, peut etre apprehende ponctuellement, au cas par cas, pour resoudre des 
besoins cibles, ou bien dans son integralite, pour mieux englober l'ensemble de la valeur 
ajoutee que constitue desormais, pour tout concepteur graphique, ce nouveau langage. Avec 
ce livre, vous serez en mesure, je le souhaite, de realiser vous-meme - et facilement - les 
sites les plus aboutis graphiquement et aux fonctionnalites avancees. 

A qui s'adresse ce livre 

Nous detaillons dans cet ouvrage les techniques utilisees en production par les webdesi- 
gners. Ce livre est destine aux flasheurs debutants qui souhaitent controler les contenus 
depuis le scenario, en codant le plus simplement possible de vraies fonctionnalites. 

Tout graphiste flasheur debutant, en poste, en freelance, ou en etude, peut trouver dans cet 
ouvrage les reponses aux questions qu'il se pose afin de maitriser ActionScript 3, directement 
dans le scenario de Flash CS4. 

Toute personne interessee par le deploiement de contenus enrichis avec Flash, maitrisant 
deja cette technique, mais inspiree par des notions inedites, comme le referencement, 
1' accessibility, le relief, l'importation d'objets 3D, entre autres, trouvera egalement des 
reponses sur ces sujets. 

Pour aborder ce livre, vous devez seulement maitriser quelques rudiments du langage 
ActionScript 3 : le placement du code dans le scenario, la gestion des fonctions et des ecouteurs, 
ainsi que la navigation dans le scenario. 

Les nombreux exemples commentes de ce livre en font un guide pratique incontournable pour 
toute personne neophyte dans la programmation en ActionScript 3 et le motion design. 

Les intentions de I'auteur 

Pour avoir ete longtemps graphiste independant sur les nouvelles technologies, des leur 
apparition dans les annees 90, je comprends le besoin de mes amis designers et de mes 
eleves graphistes de mettre en forme les contenus efficacement et facilement. 

Pour la communaute de concepteurs, de designers, de creatifs, a laquelle j'appartiens, la 
problematique est de ne pas consacrer son precieux temps a seulement coder. L'energie 
deployee en production doit privilegier avant tout la conception et la creativite. 

Si Flash est desormais un brillant outil pour 1' animation et si ActionScript 3 est desormais 
un puissant langage pour 1' interactivity, qu'en est-il de la programmation au service de la 



creation ? A la question peut-on programmer de l'interactivite avancee sur des contenus 
graphiques places a meme le scenario, ma reponse est oui ! Et comment ! 

Depuis que ce langage est arrive, aucun ouvrage n'a jusqu'ici su apporter ce qui etait reellement 
utile pour un designer. Aucun ouvrage n'a su presenter de maniere accessible et avancee, les 
techniques pour organiser dans le scenario tous les medias et tous les types d' interactions 
possibles entre ces differents medias, et ceci avec des exemples concrets et efficacement. Une 
idee pourtant simple, mais devant laquelle un desert pedagogique m'a laisse pantois. 

Oui, le ciblage est autorise et possible entre SWF imbriques. Oui, la 3D est facilement 
controlable depuis le scenario. Oui, une ligne de code suffit pour creer des animations 
epoustourlantes. Oui, la video en F4V et les points de repere sont compatibles, y compris 
avec d'anciens lecteurs Flash. Oui, nous pouvons meme, avec Flash, experimenter des choses 
incroyables comme le relief, le referencement et l'accessibilite. 

Face aux innombrables questions que mes eleves se sont posees lors de leur decouverte 
d' ActionScript 3, a celles auxquelles se sont heurtes mes collegues en production, astreints 
depuis quelques annees a la creation d'interfaces Flash sans la moindre interactivite, ainsi 
que mes amis designers ulceres (oui, oui, ulceres) par l'invraisemblable mecanique de ce 
langage, j'ai souhaite apporter mes reponses. 

II existe deux approches, souvent mises en opposition, pour apprehender 1'ActionScript 3. 
La premiere consiste a tout coder de maniere stricte dans des classes externes et ne rien 
introduire dans l'interface auteur ni sur le scenario. Cette methode permet d'optimiser la 
vitesse d' execution d'une animation de quelques micro-secondes. Mais lorsque nous consi- 
derons que la valeur ajoutee doit davantage etre focalisee sur 1' organisation du contenu et sa 
forme, plutot que sur ce temps d' execution, nous ne pouvons accepter de devoir program- 
mer des pages entieres de code, et y consacrer bien trop de temps, au detriment de la creati- 
vite et. . . de sa sante. 

A defaut de pouvoir deleguer une partie de la programmation a un tiers, 1' autre choix consiste 
done a placer, directement dans le scenario, les seules instructions utiles, pour mettre en 
forme les contenus, sans compromettre cette noble creativite et sans corrompre non plus les 
avancees du langage ni les performances de 1' application. 

Devant cette necessite de devoir livrer toutes mes astuces, j'ai done choisi de proposer un 
ouvrage qui rassemble de maniere claire, accessible et evidente, ce que j'aurais moi-meme 
jubile de trouver si je debutais : un livre synthetique sur ce que Ton pourrait nommer 
ActionScript 3 et le motion design. 

Structure du livre 

Cet ouvrage presente les instructions ActionScript 3 necessaires pour developper des concepts 
inherents a la creation interactive avec Flash CS4. Dans ce livre, nous detaillons les points 
suivants : 

• L' animation realisee a partird' instructions simples en ActionScript : les accelerations et 
les boucles. 
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La creation d' animations a partir de classes importees afin de permettre la creation 
d'interfaces animees entierement dynamiques et modifiables selon le comportement de 
l'utilisateur. 

L' animation de nitres et d'effets appliques a des contenus graphiques. 

La gestion des squelettes avec ActionScript afin de permettre le controle dynamique de 
l'animation de personnages ou de structures mecaniques ainsi que le mouvement de for- 
mes organiques composees a partir de graphismes vectoriels. 

La creation de galeries d' images simples et plus avancees, avec et sans XML, ainsi que 
l'interaction avec des objets places dynamiquement dans la scene. 

La gestion de la video au sein de Flash, a partir du format FLV, et la gestion de videos 
composites avec la transparence pour 1' implementation d'effets speciaux. 

La gestion de videos en haute definition, avec le format F4V et le codec H-264, a partir de 
sequences realisees par la societe gKaster, et compatibles avec d'anciens lecteurs Flash. 

L'interactivite en video avec les controles de lecture, le chapitrage, les points de repere, 
mais surtout toute la complexite liee a une gestion fluide et optimale du signal video, 
avec lecture en arriere et arret complet de la video dans un document embarque. 

La 3D native disponible dans Flash, avec la creation d'interfaces graphiques (murs 
d'images, galeries video, navigations spatiales). 

La modelisation et l'animation d'objets 3D reels, avec le logiciel gratuit Google Sketchup 
et la classe libre PaperVision. 

L API de traitement de 1' image avec la gestion dynamique de nitres colorimetriques afin de 
permettre la retouche des images et le lissage des contenus deformes, pivotes ou zoomes. 

Le relief avec la creation d'un contenu en relief depuis Photoshop, et son integration 
dans Flash. Nous abordons aussi dans ce chapitre la realisation inedite d'une interface 
dynamique qui affiche, automatiquement en relief, tout contenu distribue sur un index Z 
de profondeur 3D. 

La creation de systemes de navigation avances avec la resolution de problemes et de 
contraintes souvent observees en production, comme la creation de boutons a etats visites 
et les boutons interfacables imbriques. 

La communication entre un document HTML et un document Flash, afin d'ameliorer la 
relation entre les contenus dans une interface de site hybride. 

La gestion de sites tout en Flash avec la reorganisation des contenus de maniere a creer 
des interfaces elastiques, mais non deformantes, et disponibles pour un affichage en 
plein ecran. 

Les connaissances requises pour la creation d'un site en Flash, accessible pour les 
moteurs de recherche, et 1' affichage de contenu alternatif pour les utilisateurs qui ne 
disposent pas du lecteur Flash. 

En annexe, vous trouverez les outils de developpement qui permettent de rendre un 
document Flash accessible aux personnes a mobilite reduite sur le Web, ainsi que des 
references et aides pour completer votre apprentissage. Enfin, un index classique ainsi 
qu'un index des notes et remarques completent cet ouvrage. 



Preface 



5 



Les exemples 

Chaque etape du livre est presentee avec une logique pedagogique progressive. Chacun des 
chapitres aborde un theme specifique et fait reference a des exemples disponibles en Flash 
au format natif (.fla). Vous pouvez utiliser ces fichiers et leur code, librement, a l'exception 
des videos et des images qui y sont placees uniquement pour illustrer l'ouvrage. 

L'ensemble des exemples du livre est disponible en telechargement a l'adresse suivante : 
http://www.pearson.fr/livre/?GCOI=27440100685160. 

Pour suivre confortablement les exemples commentes du livre, veuillez telecharger distinc- 
tement les differents dossiers compresses mis a votre disposition, puis rassembler leurs 
contenus respectifs dans le meme repertoire que vous creerez et nommerez "Exemples". 
Tout au long du livre, nous faisons reference aux fichiers places dans ce dossier "Exemples". 
Aussi, en organisant vos telechargements de la sorte, vous en faciliterez la lecture. 

Dans les exemples, de nombreux fichiers font egalement reference a des contenus places 
dans des repertoires ou des classes ActionScript et JavaScript. Pour votre confort, il convient 
done de telecharger l'ensemble des dossiers compresses et de tous les rassembler dans ce 
nouveau dossier "Exemples" que vous aurez cree. Vous pourrez alors exploiter librement les 
fichiers appeles tout au long de la lecture de l'ouvrage. 



Conventions 

Ce livre contient quelques morceaux de code, represented avec cette convention : 
// actions 

this . addEvent Listener (Event . ENTER_FRAME, defilement Panoramique) ; 
Dans le corps du texte, les elements relatifs a ActionScript sont notes avec cette typographie. 

Ce pictogramme signale que vous pouvez telecharger les fichiers d'exemple sur le site de Pearson. 
Nous disposons d' autre part de deux types d' encadres : 



Ces encadres sont des remarques : il peut s'agir d'un point auquel 
faire attention, d'une reference externe, d'une definition, d'une 
astuce, d'un renvoi... 



Encadres 

Ces encadres sont des encadres de reference, lis emaillent le texte et precisent certains points de 
maniere formelle. lis sont recenses dans la Table des encadres en fin d'ouvrage. 
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Introduction 

Les animations realisees en ActionScript, qu'elles constituent des defilements panoramiques 
ou des elements de decor simplement mobiles, permettent de mettre en scene des contenus 
sans recourir a l'utilisation du scenario. L'avantage de ce precede, par rapport au scenario, 
est que Ton peut facilement modifier des valeurs (positions, echelles, angles de rotation) en 
fonction d'une variable sans avoir a recreer toute l'animation. Ce precede n'etant pas exclu- 
sif, vous pouvez parfaitement cumuler l'avantage d'une animation elaboree, realisee dans le 
scenario, a la souplesse d'une animation codee en ActionScript. 

Dans les exemples qui suivent, vous allez apprendre a animer des mises en forme avec 
ActionScript, a redefinir les proprietes des objets de la scene avec un amortissement, et a 
gerer des defilements en boucle dans un environnement en perpetuel mouvement. A Tissue 
de ce chapitre, vous serez en mesure de vous abstraire du scenario pour realiser une partie de 
vos animations en code, et vous permettre, en plus de la souplesse obtenue dans la conception 
des animations, d'alleger deja la structure du document. 

Animer les proprietes : position, dimension, rotation, 
opacite et echelle 

L'exemple que nous proposons ici est un decor multi-plans compose de clips distincts. Chaque 
clip est deplace en incrementant ses proprietes dans un gestionnaire de type ENTER_FRAME. 

Ce decor, une fois anime, represente une animation de type panoramique qui disparait progres- 
sivement pour laisser place a l'arriere-plan du document principal (voir Figure 1.1). 



ActionScript 3 ET motion design 



Exemples > chl_animationEnActionScript_l .fla 



Le document que nous utilisons presente la structure suivante : dans le scenario de la scene 
principale, au-dessus du caique f ond_mc, clairement repartis vers des caiques distincts et 
masques, nous pouvons acceder a differents symboles de type MovieClip ayant tous un cen- 
tre place en haut et a gauche. Chacun de ces symboles dispose, en outre, d'un nom d'occur- 
rence qui le distingue bien des autres et lui permet d'etre control e par ActionScript. Pour 
faciliter 1' identification de l'objet depuis la fenetre Actions, le nom d' occurrence a ete 
repete sur le caique qui contient chaque occurrence de symbole (voir Figure 1.2). 



Figure 1.2 

Structure du 
document. 
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Nommer les caiques automatiquement. Pour renommer automatiquement chacun des caiques 
qui contient une occurrence de symbole, plutot que de nommer chaque caique manuellement, pensez a 
repartir la ou les occurrences de symboles vers les caiques par un die droit ou Ctrl+clic > Repartir vers les 
caiques, directement sur la ou les occurrences de symboles disponibles sur la scene. Attention toutefois, 
si une occurrence de symbole ne possede pas d'identifiant, e'est le nom du symbole, disponible dans 
la bibliotheque, qui sera utilise par Flash pour nommer chacun des nouveaux caiques crees. 

En haut du scenario, un caique nomme actions contient le code suivant : 
// initialisation 

var vitesseDefilement:Number=5; 

// actions 

this . addEvent Listener (Event . ENTER_FRAME, defilement Panoramique) ; 

function def ilementPanoramique (evt:Event) { 
1 1 1 1 1 1 1 1 1 1 1 1 1 1 x 
ciel_mc . x-=vitesseDef ilement ; 
dune_mc .x-=vitesseDef ilement*0.2; 
arbre1_mc . x-=vitesseDef ilement *0. 3; 
arbre2_mc . x+=vitesseDef ilement *0. 5; 
arbre3_mc . x+=vitesseDef ilement *0 . 8 ; 
arbre4_mc . x+=vitesseDef ilement *0. 9; 

1 1 1 1 1 1 1 1 1 1 1 1 1 1 y 
ciel_mc.y-=1 ; 

1 1 1 1 1 1 1 1 1 1 1 1 1 1 width et height 

ciel_mc.width+=10; 

ciel_mc. height +=10; 
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1 1 1 1 1 1 1 1 1 1 1 1 1 1 rotation 
ciel_mc . rotation-=0 . 1 ; 

1 1 1 1 1 1 1 1 1 1 1 1 1 1 alpha 
ciel_mc.alpha-=0.01 ; 
dune_mc.alpha-=0.01 ; 
arbre1_mc . alpha- =0 . 025; 
arbre2_mc. alpha- =0.03; 
arbre3_mc . alpha- =0 . 035 ; 
arbre4_mc . alpha-=0 . 04; 

1 1 1 1 1 1 1 1 1 1 1 1 1 1 scaleX et scaleY 
dune_mc . scaleX+=0 . 001 ; 
dune_mc . scaleY+=0 . 001 ; 

// trace 

trace(ciel_mc.x) ; 

if (ciel_mc.x<-600) { 

this . removeEvent Listener (Event . ENTER_FRAME, defilement Panoramique) ; 

} 

} 

Ce code est structure en deux parties. Une partie enumere les valeurs a configurer avant de 
lancer les actions. L' autre partie affiche les programmes a executer a partir de ces valeurs 
prealablement initialisees. Le programme utilise pour le defilement du panoramique utilise la 
variable vitesseDef ilement pour determiner le positionnement de chaque objet. Mais, c'est 
selon la position de l'objet ciel_mc que nous interrompons ou non l'execution de l'animation. 
Le positionnement des objets est done indirectement arbitre selon la position de ciel_mc. 



Philosophie d AS3 

Nous entrons ici dans le coeur de la philosophie d'ActionScript 3 oil tout doit etre clairement defini et 
identifie par le lecteur Flash avant de pouvoir executer les programmes developpes. L'objectif de la 
declaration prealable des elements utilises est que, ce faisant, nous prevenons le lecteur Flash de 
I'espace memoire qu'il doit reserver pour chaque objet declare avant de les utiliser. 

Ainsi, lorsqu'ils sont manipules au moment des actions du programme, l'execution des scripts est acce- 
leree car seul I'espace requis par ces objets est deploye par le lecteur. C'est la raison pour laquelle les 
lignes de commande en AS3 sont plus nombreuses qu'en AS2, mais concourent a un meilleur resultat 
lors de l'execution du document par le lecteur Flash car l'animation est alors optimisee. 



Tout d'abord, nous declarons les valeurs a utiliser : 

var vitesseDefilement:Number=5; 

Dans la partie initialisation, une valeur de type nombre, vitesseDef ilement, repre- 
sente le coefficient d' acceleration du defilement panoramique. Plus cette valeur est elevee, 
plus le defilement sera accelere. 

Puis, nous developpons le programme : 

// actions 

this . addEvent Listener (Event . ENTER_FRAME, defilement Panoramique) ; 
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Tout d'abord, nous attachons un ecouteur sur 1' image courante avec un gestionnaire de type 
Event . ENTER_FRAME qui permet d'executer une fonction au rythme exact de la cadence de 
la scene. A raison d'une cadence de 25 ips, la fonction sera executee 25 fois chaque seconde. 
Cette frequence est suffisante pour simuler une progression continue et homogene de 
valeurs, telle que la modification de la position d'elements dans notre decor, par exemple. 
La fonction appelee en deuxieme parametre est identifiee par le terme defilementPano- 
ramique et developpee plus loin dans le code. 



Nommer une fonction 

Le nom attribue a une fonction est libre, mais ne doit pas comporter d'espace, ni de caracteres 
accentues ou speciaux. Pour faciliter ('identification de ce que contient la fonction, il est souhaitable 
de la nommer de maniere intelligible. Par exemple, pour une fonction destinee a restaurer la posi- 
tion d'un menu deroulant, nous pouvons la nommer restaurationMenuDeroulant. La syntaxe ici 
employee pour nommer la fonction est la syntaxe dite chameau [Camel, en anglais). 



Syntaxe chameau et separateurs 

La syntaxe chameau (ou Camel] consiste a nommer un objet, une variable ou une fonction, en collant 
les mots que vous avez choisis arbitrairement et qui composent son nom, en les separant a I'aide d'une 
majuscule. Par exemple, la designation lancerLeMenuDeroulant qui peut identifier une fonction 
destinee a deployer un menu deroulant, utilise la syntaxe chameau. Cette syntaxe permet d'eviter d'uti- 
liser le separateur tiret (-) considere en ActionScript comme un operateur de soustraction. L'expression 
lancer-le-menu-deroulant aurait en effet indique au lecteur Flash de soustraire la valeur deroulant a la 
valeur menu, elle-meme soustraite a la valeur le, elle-meme soustraite a la valeur lancer. 



Nommer les occurrences 

La syntaxe chameau est egalement utilisee pour nommer les occurrences de symbole. On y ajoute, 
en revanche, pour faciliter I'identification du type de I'objet lors de son apparition dans le code, une 
pseudo extension. Une pseudo extension permet de signaler la nature de I'objet (MovieClip, bouton, 
etc.) lorsque celui-ci est mentionne dans le code ActionScript sans avoir a revenir sur I'objet qui figure 
dans la bibliotheque ou dans la scene. Pour creer une pseudo extension, qui ne soit pas percue 
comme un operateur par le lecteur Flash, nous utilisons le caractere underscore (_) suivi de caracte- 
res qui definissent I'objet cree. Par exemple : menujnc, lien_btn, legende_txt et ecran_video 
utilisent les extensions les plus couramment employees et designent respectivement un MovieClip, 
un bouton, un champ de texte dynamique et un composant video. Vous pouvez creer vos propres 
extensions, mais celles qui sont presentees ici sont reconnues pour etre utilisees par un grand nom- 
bre de flasheurs et elles vous aideront dans le cadre de developpements collaboratifs. Une occur- 
rence de symbole ne peut en outre pas etre composee de separateur tiret (-) toujours considere 
comme un operateur de soustraction, ni commencer par un chiffre. 



Plus loin, dans notre programme, nous creons la fonction def ilementPanoramique appelee 
par le gestionnaire d'evenements. Cette fonction reprend le nom de la classe Event, en para- 
metre, utilisee dans le gestionnaire et ne peut ainsi etre executee que par ce type de gestionnaire. 
La syntaxe du terme evt qui precede le rappel de la classe employee reste a votre appre- 
ciation. Vous pourriez aussi bien le nommer titi ou Balthazar, cela n'affecte en rien le code. 
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II s'agit simplement d'utiliser un nom qui permette de faire reference, plus tard dans la 
fonction, a la classe utilisee, comme le ferait une variable dans un autre contexte : 

function def ilementPanoramique (evt:Event) { 
} 

Usuellement, nous rencontrons aussi les termes e, event, evenement ou EventObject, 
pour designer la classe vehiculee dans la fonction. Une fonction doit toujours vehiculer la 
classe invoquee par le gestionnaire d'evenements qui s'y refere (par exemple : MouseEvent), 
car un gestionnaire d'evenements n'est autre qu'une methode qui renvoie, a la fonction appe- 
lee, le parametre evenement auquel justement il se rattache. La fonction appelee par le gestion- 
naire doit done etre typee pour recevoir ce parametre et pouvoir etre executee normalement. 
C'est la raison pour laquelle vous ne pouvez pas utiliser de fonction autonome (e'est-a-dire, 
sans typage d'evenement), si celle-ci est appelee directement par un gestionnaire d'evene- 
ments. Nous verrons, plus loin dans cet ouvrage, qu'il est en revanche possible d'appeler 
une fonction autonome a partir d'une fonction, qui, elle, sera belle et bien typee. 



Les classes 

Chaque objet que vous manipulez dans le scenario ou par le code est regit par une classe. Une 
classe regroupe un ensemble de lignes de code, d'instructions, de fonctions, qui permettent de defi- 
nir le comportement d'un objet lorsqu'il est deploye. Ces classes sont, soit integrees dans le moteur 
de I'application Flash, soit inexistantes et c'est a vous de les ajouter. Certaines classes, integrees a 
I'application Flash, sont transparentes et compilees par Flash a la publication sans meme que Ton 
s'en apercoive. C'est le cas des symboles de type bouton, MovieClip, des symboles graphiques, des 
champs de texte ou des composants video. D'autres classes doivent etre importees manuellement 
pour etre utilisees, en les mentionnant en amorce du code par une commande du type : import 
flash . events . Event ; . Normalement, toutes les classes utilisees doivent etre importees ainsi avant de 
s'y referer a travers, par exemple, un gestionnaire d'evenements tel que celui-ci : this . addEvent- 
Listener(Event . ENTER_FRAME, def ilementPanoramique) ;. Mais, pour faciliter le codage, si 
nous developpons directement dans I'interface auteur de Flash, la plupart des classes ne sont pas 
requises car elles sont automatiquement integrees par I'API du logiciel. Ainsi, II n'est pas necessaire 
de mentionner I'importation de la classe Event pour I'utiliser dans notre gestionnaire d'evenements. 



Les sept lignes de code suivantes, placees a l'interieur du bloc d' instruction de la fonction, 
font reference aux objets places sur la scene principale. 

1 1 1 1 1 1 1 1 1 1 1 1 1 1 x 
cieljnc . x-=vitesseDef ilement ; 
dune_mc . x-=vitesseDef ilement *0 .2; 
arbre1_mc . x-=vitesseDef ilement *0 .3; 
arbre2_mc . x+=vitesseDef ilement *0 . 5 ; 
arbre3_mc . x+=vitesseDef ilement *0 . 8 ; 
arbre4_mc . x+=vitesseDef ilement *0 . 9 ; 

Dans le contexte d'une fonction executee perpetuellement, ces actions redefinissent la posi- 
tion en x de chacun des objets, un a un et en continu, de sorte que leur position s'incremente 
automatiquement d'une certaine valeur. Cette valeur est definie en fonction de la variable 
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d' acceleration vitesseDef ilement initialisee plus haut. Certains objets observent une 
incrementation positive (+=) et d'autres, une incrementation negative (-=). Cette differen- 
tiation permet d'inverser le sens de defilement et d'accentuer l'effet de panoramique sur des 
objets distribues au premier plan, au regard de ceux places a l'arriere-plan. 

Nous determinons ainsi, de facon arbitraire, le point de vue d'origine du spectateur. Selon 
la position de l'objet dans la scene et selon son eloignement par rapport a l'arriere-plan, 
nous indiquons egalement un coefficient (*0.2 par exemple) qui permet de reduire 
son acceleration de sorte que chaque objet se deplace a une vitesse differente. Cet effet 
de reduction du pas d' acceleration permet d'accentuer plus encore l'effet de volume dans 
le decor, un peu a la maniere d'une animation japonaise de type Manga ou les plans 
qui se superposent sont souvent marques. Pour renforcer encore l'effet volumetrique, un 
filtre flou est applique sur chaque objet, directement dans le scenario, avec des valeurs 
distinctes. 



Les proprieties en ActionScript 3 

■ x . nomDuClip_mc . x designe I'abscisse x, soit la position horizontale, d'une occurrence de sym- 
bole clip ou MovieClip nommee nomDuClip_mc. 

■ y. nomDuClip_mc.y designe I'ordonnee y soit la position verticale, d'une occurrence de sym- 
bole clip nommee nomDuClip_mc. 

■ width et height. nomDuClipjnc .width et nomDuClipjnc . height designent respectivement 
la largeur et la hauteur du meme MovieClip. 

■ rotation. nomDuClipjnc . rotation designe le degre de rotation de l'objet, defini sur une 
valeur comprise entre 0 et 360. 

■ alpha. nomDuClipjnc . alpha designe I'opacite de l'objet. Cette valeur est comprise entre 0 
et 1 . 0 equivaut a 0 % d'opacite, done, a de la transparence. 1 equivaut a 1 00 % d'opacite. Les 
valeurs intermediates sont exprimees en decimales. Ainsi, nomDuClipjnc. alpha=0. 4 designe 
une valeur d'opacite de 40 %. 

■ visible. nomDuClip. visible permet de modifier la visibilite d'un objet dans la scene. Cette 
propriete se definie avec une valeur booleenne de type true ou false. II n'existe pas de valeur 
intermediate. Cette propriete est moins gourmande en ressources graphiques que la propriete 
alpha et est recommandee pour masquer integralement un objet, y compris la zone reactive 
qu'il possede eventuellement. La propriete alpha, effectivement, rend un objet invisible, mais 
conserve I'interactivite qui y est eventuellement attachee avec ActionScript. Par exemple, nomDu- 
Clip . visible=f alse rend l'objet nomDuClip invisible et non cliquable. 

■ scaleX et scaleY. nomDuClipjnc. scaleXet nomDuClipjnc . scaleY designent respectivement 
I'echelle horizontale et verticale du meme MovieClip. Cette valeur s'exprime egalement de 0 a 1 , 
mais peut depasser 1 si I'echelle doit etre superieure a 1 00 %. La valeur peut egalement etre infe- 
rieure a 0 si Ton souhaite obtenir un effet miroir ou une symetrie sur un axe vertical (scaleX) ou 
horizontal (scaleY). 



Ensuite, nous intervenons sur une autre propriete, la propriete y. Elle est utilisee ici pour 
redefinir la position verticale du ciel pendant la progression du panoramique. En incrementant 
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la valeur (fun entier positif, le ciel monte au debut du panoramique et redescend des que 
celui-ci atteint la limite du document : 

1 1 1 1 1 1 1 1 1 1 1 1 1 1 y 
ciel_mc.y-=1 ; 

De la meme maniere, la largeur et la hauteur du ciel sont modifiees avec les proprietes 
width et height afin que celui-ci donne l'illusion de se mouvoir. Les largeur et hauteur 
d'un symbole etant definies en pixels, la valeur est ici multipliee par 10 afin de la rendre 
perceptible, car un pas d' incrementation de 1 pixel ne serait pas suffisamment visible : 

1 1 1 1 1 1 1 1 1 1 1 1 1 1 width et height 
cieljnc .width+=10; 
cieljnc . height+=10; 

Comme pour les autres proprietes, rotation permet de faire pivoter l'objet avec un pas 
d' incrementation defini en degres. Pour attenuer l'effet et eviter que le ciel tourne comple- 
tement sur lui-meme, la valeur est divisee par 10 : 

1 1 1 1 1 1 1 1 1 1 1 1 1 1 rotation 
cieljnc. rotation-=0.1 ; 

L' animation d'une transparence se fait avec la propriete alpha definie sur une echelle de 0 
a 1. Pour amortir l'effet, nous utilisons une valeur decimale faible. Cela equivaut aussi a 
diviser la valeur par un chiffre eleve : 

1 1 1 1 1 1 1 1 1 1 1 1 1 1 alpha 
cieljnc .alpha-=0.01 ; 
dunejnc . alpha-=0 . 01 ; 
arbre1_mc . alpha- =0 . 025; 
arbre2_mc . alpha- =0 . 03; 
arbre3_mc . alpha- =0 . 035; 
arbre4_mc . alpha- =0 . 04 ; 

Enfin, la deformation en x et en y se definit avec les proprietes scaleX et scaleY. Comme 
pour 1' alpha, nous utilisons des valeurs comprises entre 0 et 1 pour determiner une echelle 
de 0 % a 100 % par rapport a la taille originale du symbole. Pour eviter une deformation 
trop importante de la dune, nous divisons la valeur par 1 000 : 

1 1 1 1 1 1 1 1 1 1 1 1 1 1 scaleX et scaleY 
dunejnc . scaleX+=0.001 ; 
dunejnc . scaleY+=0.001 ; 

Dans notre script, une action trace ponctue la fonction. Elle permet simplement de verifier 
la position x du ciel que nous modifions et sert de reference pour 1' ensemble de 1' animation 
qui s'interrompt precisement par rapport a la position de cet objet : 

// trace 

t race ( cieljnc. x) ; 

Enfin, la fonction s'acheve avec une structure conditionnelle qui indique de stopper l'execution 
de P animation des que la position x du ciel atteint une certaine valeur : 

if (cieljnc. x<-600) { 

this . removeEvent Listener (Event . ENTER J^RAME, defilement Panoramique) ; 

} 
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Pour arreter un gestionnaire d'evenements, nous reprenons simplement le gestionnaire prea- 
lablement active pour lequel nous substituons l'expression addEventListener a remove- 
EventListener qui designe clairement d'interrompre le gestionnaire. Sans cette action, en 
effet, 1' animation continuerait, meme si nous ne la percevons plus, jusqu'a des valeurs infi- 
nies, et risquerait d'alourdir considerablement l'execution du programme. En interrompant 
les ecouteurs lorsqu'ils ne sont plus necessaires, vous optimisez vos animations. 

A retenir 

■ Pour creer une animation perpetuelle, rythmee sur la cadence de la scene, nous utilisons un ges- 
tionnaire de type Event . ENTER_FRAME. 

■ Pour incrementer ou diminuer une valeur, nous precedons le signe egal du signe plus (+) ou moins 
(-), selon que Ton souhaite augmenter la valeur ou la diminuer. 

■ Pour optimiser I'espace memoire, en programmation, nous typons les valeurs et les objets avant de 
les utiliser dans les actions. 

■ La syntaxe chameau (en anglais : Camel] permet d'identifier rapidement le nom des fonctions et des 
occurrences d'objets crees, sur la scene ou dynamiquement. 

■ Les extensions _mc, _btn, _txt et _video permettent de vehiculer, dans le nom d'occurrence des 
objets, leur type et ainsi facilite leur identification dans le code. 

■ Les proprietes les plus couramment utilisees sont x, y, width, height, rotation, alpha, visible 
et scaleX, scaleY. 

■ Pour optimiser une animation, nous interrompons les ecouteurs lorsqu'ils ne sont plus necessaires, 
avec removeEventListener. 

Gerer les proprietes avec des conditions 

L'exemple utilise dans cette section etend celui developpe dans la section precedente. II uti- 
lise en plus une structure conditionnelle et des variables d'ajustement qui permettent de 
determiner automatiquement le sens de defilement d'un panoramique et sa vitesse, selon les 
valeurs attributes a quelques variables. Dans cette section, nous allons voir comment cen- 
traliser le calcul de 1' animation de l'ensemble des proprietes sur ces variables, definies en 
amont du programme. 

Exemples > chl_animationEnActionScript_2.fla 

Le document que nous utilisons presente la structure suivante : dans le scenario de la scene 
principale, au-dessus du caique f ond_mc, clairement repartis vers des caiques distincts et 
masques, nous pouvons acceder, de meme, a differents symboles de type MovieClip ayant 
tous un centre place en haut et a gauche. Chacun de ces symboles dispose d'un nom 
d'occurrence qui le distingue des autres et lui permet d'etre controle par ActionScript. Pour 
faciliter 1' identification de l'objet depuis la fenetre Actions, le nom d'occurrence a ete 
repete sur le caique qui contient chaque occurrence de symbole (voir Figure 1.3). 
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En haut du scenario, un caique nomme actions contient le code suivant : 

// initialisation 

var sens : Number=1 ; 

var vitesseDefilement:Number=5; 

var limit eGauche : Number=( stage . stageWidth-vitesseDef ilement ) *-sens ; 
var limit eDroite : Number=vitesseDef ilement* -sens; 

// actions 

this . addEvent Listener (Event . ENTER_FRAME, defilement Panoramique) ; 



function def ilementPanoramique (evt:Event) { 

1 1 1 1 1 1 1 1 1 1 1 1 1 1 x 

ciel_mc .x-=(vitesseDef ilement *1 )*sens; 
dune_mc.x-=(vitesseDef ilement *0. 2) *sens; 
arbre1_mc . x-=(vitesseDef ilement *0. 3) *sens; 
arbre2_mc . x+=(vitesseDef ilement *0. 5) *sens; 
arbre3_mc . x+=(vitesseDef ilement*0.8) *sens; 
arbre4_mc . x+=(vitesseDef ilement*0.9) *sens; 

if (ciel_mc.x>limiteDroite) { 
sens=1 ; 

} 

if (ciel_mc.x<limiteGauche) { 
sens=-1 ; 

} 

1 1 1 1 1 1 1 1 1 1 1 1 1 1 y 
ciel_mc.y-=sens; 

1 1 1 1 1 1 1 1 1 1 1 1 1 1 width et height 
ciel_mc . width+=sens*1 0 ; 
ciel_mc . height+=sens*1 0; 

1 1 1 1 1 1 1 1 1 1 1 1 1 1 rotation 
ciel_mc . rotation-=sens/10; 

1 1 1 1 1 1 1 1 1 1 1 1 1 1 alpha 
arbre1_mc . alpha- =sens*0 .025; 
arbre2_mc . alpha- =sens*0 .03; 
arbre3_mc . alpha- =sens*0 . 035 ; 
arbre4_mc . alpha- =sens*0 .04; 

1 1 1 1 1 1 1 1 1 1 1 1 1 1 scaleX et scaleY 
dune_mc . scaleX+=sens/1000; 
dune_mc . scaleY+=sens/1000; 



// trace 

trace(cieljnc.x) ; 

} 
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Ce code est structure en deux parties. Une partie enumere les valeurs a configurer avant de 
lancer les actions. L' autre partie affiche les programmes a executer a partir de ces valeurs 
prealablement initialisees. Comme dans la section precedente, le programme cree pour le 
defilement du panoramique utilise d'abord la variable vitesseDef ilement pour determi- 
ner la position des objets de la scene, puis modifie leur direction selon la position courante 
de l'objet ciel_mc. 

Tout d'abord, nous declarons les valeurs a utiliser : 

var sens : Number=1 ; 

var vitesseDefilement:Number=5; 

var limit eGauche : Number=( stage . stageWidt h- vitesseDef ilement ) *-sens ; 

var limit eDroit e : Number=( vitesseDef ilement* -sens ; 

Avant de detailler le mode de calcul qui determine ces valeurs, nous devons comprendre ce 
qui succede a la definition de ces variables. Dans la partie actions, situee plus loin, vous 
relevez que les proprietes des objets du decor sont modifiees a partir des valeurs que nous 
definissons ici. 

Revenons dans la partie initialisation. La variable sens (var sens : Number=1) declare 
un nombre qui donne le sens de defilement du panoramique. Une valeur positive fait defiler 
le contenu de la scene d'abord vers la gauche, puis vers la droite et reprend ce mouvement 
perpetuellement. A l'inverse, une valeur negative le fait denier d'abord vers la droite, puis 
vers la gauche, et reitere le mouvement perpetuellement. 

Dans la ligne suivante, vitesseDef ilement represente le coefficient d' acceleration du 
defilement panoramique. Plus cette valeur est elevee, plus le defilement sera accelere. 

La variable limiteGauche declare, elle, une autre valeur de type nombre. Cette variable 
definit la limite de defilement du decor a atteindre avant que la condition n' inverse le sens 
du defilement. Cette valeur resulte du calcul suivant : largeur de la scene (stage . stage- 
Width) moins le pas d' acceleration (vitesseDef ilement). Cette combinaison permet en 
realite d'eviter de percevoir une rupture dans le decor lorsque celui-ci apparait integrate - 
ment hors champ. En effet, considerons par exemple que le script execute le defilement 
jusqu'a -800. Nous devrons alors ecrire ceci : 

var limiteGauche : Number=stage . stageWidth*-sens 

Comme ce script est execute apres la verification indiquee dans la structure conditionnelle, 
il aurait alors le temps de s'executer encore une derniere fois avant d'etre reinitialise seule- 
ment a la lecture suivante du script. Cela porterait le ciel a une position x de -805 et laisserait 
apparaitre un blanc de 5 pixels de large, au-dela des dimensions limites du visuel. La 
valeur 5 correspondant a la valeur du pas decrementation, nous la retranchons done a la 
largeur limite du defilement pour prevenir du decalage induit par le fait que le calcul du 
repositionnement s'effectue seulement apres la verification de la condition. La scene qui 
mesure 800 pixels dans notre document, rapporte done une largeur limite de 795 pixels. 

A cela, la limite gauche du defilement panoramique, calculee a partir du positionnement du 
ciel, correspond en realite au positionnement du ciel lorsqu'il atteint une valeur negative de 
-800. II reste done a inverser la valeur 795 obtenue par l'equation stage . stageWidth- 
vitesse-Def ilement, en la multipliant par le sens du defilement afin d'obtenir une valeur 
negative, ou qui sinon corresponde a la valeur imposee par le sens voulu pour le defilement 
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de notre animation. Nous utilisons ainsi la valeur 1 pour un defilement vers la droite, ou -1 
pour un defilement vers la gauche. 

La variable limiteDroite declare, elle, une valeur de type nombre egalement, mais qui 
determine la limite du defilement a droite. Cette valeur est calculee sur le meme principe 
que pour la limite gauche, excepte que nous nous basions sur le point d'origine de la scene 
qui vaut zero, et non plus sur sa largeur. Le resultat obtenu est -5 ici, contre -795 pour la 
limite gauche. Le defilement oscille done entre ces deux valeurs limites. 

Puis, nous developpons le programme : 
// actions 

this . addEvent Listener (Event . ENTER_FRAME, defilement Panoramique) ; 

function def ilementPanoramique (evt:Event) { 

} 

Les 7 lignes de code suivantes, placees a l'interieur du bloc d'instruction de la fonction, 
font de nouveau reference aux objets places sur la scene principale. 

1 1 1 1 1 1 1 1 1 1 1 1 1 1 x 

cieljnc . x-=(vitesseDef ilement*1 ) *sens; 
dunejnc.x-=(vitesseDef ilement*0 .2) *sens; 
arbre1_mc . x-= ( vitesseDef ilement*0 .3) *sens; 
arbre2_mc . x+=( vitesseDef ilement*0 . 5) *sens ; 
arbre3_mc .x+= (vitesseDef ilement*0 . 8) *sens ; 
arbre4_mc .x+=( vitesseDef ilement*0 . 9) *sens ; 

Les actions, ici, redefinissent la position en x de chacun des objets, de sorte que leur posi- 
tion s'incremente automatiquement d'une certaine valeur. Mais, cette valeur est desormais 
definie en fonction de deux coefficients : la variable d' acceleration vitesseDef ilement et 
la variable sens, initialisees plus haut. 

Deux conditions determinent ensuite a quel moment le lecteur Flash doit inverser la polarite 
du sens de defilement. La premiere condition indique de l'inverser lorsque le ciel atteint la 
limite droite du document, definie par la valeur limiteDroite. La seconde indique d'inver- 
ser egalement la valeur lorsque le ciel atteint la limite gauche avec la valeur limiteGauche. 
Ainsi, pour la premiere condition, nous pouvons : si la position x du ciel est superieure a la 
valeur limite de droite qui vaut -5, alors, nous inversons le sens du pas d' incrementation -1 
en 1. Cette valeur affecte le calcul du positionnement des objets, en amont dans le code, de 
sorte que le defilement est egalement inverse, et inversement pour le defilement a gauche : 

if (cieljnc. x>limiteDroite) { 

sens=1 ; 

} 

if (ciel_mc.x<limiteGauche) { 

sens=-1 ; 

} 

Ensuite, nous intervenons sur les autres proprietes, en y associant les variables d'ajus- 
tement : 

1 1 1 1 1 1 1 1 1 1 1 1 1 1 y 

cieljnc. y-=sens; 

1 1 1 1 1 1 1 1 1 1 1 1 1 1 width et height 

cieljnc .width+=sens*1 0; 
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cieljnc .height+=sens*10; 
1 1 1 1 1 1 1 1 1 1 1 1 1 1 rotation 
ciel_mc. rotation-=sens/10; 
1 1 1 1 1 1 1 1 1 1 1 1 1 1 alpha 
arbre1_mc . alpha- =sens*0. 025; 
arbre2_mc . alpha- =sens*0. 03; 
arbre3_mc . alpha- =sens*0. 035; 
arbre4_mc . alpha- =sens*0 .04; 
1 1 1 1 1 1 1 1 1 1 1 1 1 1 scaleX et scaleY 
dune_mc . scaleX+=sens/ 1 000 ; 
dune_mc .scaleY+=sens/1000; 
// trace 

trace(cieljnc.x) ; 



A retenir 

■ Pour simplifier un programme, il est souhaitable de centraliser, sous la forme d'un denominateur 
commun, ce qui est susceptible d'alleger le code, a travers une ou plusieurs variables par exemple. 

■ Les conditions permettent de modifier I'orientation d'une animation des qu'elle atteint une certaine 
limite. 



Gerer les accelerations 

Dans cette section, des symboles sont disposes arbitrairement dans la scene. Lorsque le 
pointeur de la souris bouge, les symboles bougent aussi, mais avec une inertie (voir 
Figure 1.4). Nous allons apprendre ici a definir le mouvement d'un symbole en fonction de 
la position du pointeur, en lui affectant un effet de retard qui donne une illusion d'amortis- 
sement. 



Figure 1.4 

Apercu 

de I'exercice. 
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Exemples > chapl_animationEnActionScript_3.fla 



Le document que nous utilisons presente la structure suivante : le decor masque et situe au- 
dessus du caique f ondjnc, est compose d'un degrade et de trois symboles de type Movie- 
Clip, repartis chacun vers les caiques de la scene principale. Chaque symbole est, en outre, 
place par rapport a son centre, au milieu de la scene. Mais, a l'interieur de chacun des sym- 
boles, les elements sont repositionnes de sorte qu'ils ne se superposent pas completement 
arm de permettre a l'utilisateur d'interagir avec ces objets, malgre leur position commune 
(voir Figure 1.5). 



Figure 1.5 

Structure du 
document. 
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Dans la partie superieure, un caique actions presente le code utilise pour l'animation. 

L'astuce, ici, pour creer un effet de flottement des symboles sans toutefois redefinir leur 
position relative les uns par rapport aux autres, est que nous utilisons un positionnement 
identique de tous les symboles. Mais chaque objet, dont le code controle le positionnement, 
se deplace avec un retardement. Si bien que nous avons l'illusion que les objets oscillent de 
part et d'autre en fonction de la position du pointeur, et reviennent toujours a leur position 
relative, predefinie dans la composition. Cette organisation structurelle permet de simplifier 
la gestion du deplacement du groupe que constitue 1' ensemble des symboles sans avoir a 
multiplier inutilement les conteneurs et les lignes de code. 

Du cote du code, toujours dans notre document, chaque clip est par ailleurs deplace en 
incrementant ses proprietes a travers un gestionnaire de type ENTER_FRAME, comme dans 
l'exemple precedent, mais des variables nous permettent de definir, en plus, des coefficients 
d' acceleration pour generer l'effet de retardement. 

En haut du scenario, le caique actions affiche le code suivant. 

// initialisation 

var retard :Number=20; 

// actions 

this . addEvent Listener (Event . ENTER_FRAME, navigation) ; 

function navigation(evt:Event) { 

// x 

photo"! _mc . x+= (mouseX- photo"! _mc . x) / retard ; 
photo2_mc.x+=(mouseX-photo2_mc.x) / (retard*2) ; 
photo3_mc.x+=(niouseX-photo3_mc.x) / (retard*3) ; 

// y 
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photo1_mc . y+=(mouseY-photo1_mc .y) /retard; 
photo2_mc.y+=(mouseY-photo2_mc.y) / (retard*2) ; 
photo3_mc.y+=(mouseY-photo3_mc.y) / (retard*3) ; 

} 

Dans un premier temps, nous declarons les variables a utiliser : 

// initialisation 

var retard:Number=20; 

La variable retard que nous creons permet de definir l'intensite de 1'amortissement pour tous 
les symboles. Une valeur egale a 1 synchronise le mouvement de tous les symboles sur le poin- 
teur. Une valeur elevee augmente le temps necessaire a chaque symbole pour atteindre la posi- 
tion du pointeur et accentue, de ce fait, l'effet d'amortissement. La valeur 0 ne peut etre 
appliquee car nous utilisons plus loin des divisions et Ton ne peut pas diviser par zero. 

Puis, nous developpons le programme. 

Dans la partie actions du codage, nous creons le gestionnaire qui appelle la fonction a exe- 
cutor. Le gestionnaire utilise la classe Event et l'evenement ENTER_FRAME arm de permettre 
que le calcul du positionnement des symboles se fasse au rythme de la cadence de la scene. 
Pour une animation plus fluide, il suffit, par consequent, d'augmenter la cadence de la scene qui 
est definie ici a 25 ips : 

// actions 

this. addEvent Listener (Event . ENTER_FRAME, navigation) ; 

Plus loin, nous inscrivons la fonction qui rassemble les actions a executor : 

function navigation(evt:Event) { 
} 



Typage des nombres 

II est possible d'optimiser I'animation Flash de quelques fragments de milliemes de secondes en privi- 
legiant un typage plus restrictif a un typage large. Par exemple, le typage Number, large, reserve 
I'espace memoire requis pour stocker un chiffre entier ou decimal, positif ou negatif, code 
sur 64 bits. Le typage int, lui, le restreint aux nombres entiers positifs et negatifs, a 32 bits. Le 
typage int est done plus optimise que le typage Number et est recommande, dans la mesure ou 
notre variable ne requiert pas une valeur decimale ou negative. Plus optimise encore, le typage uint 
mentionne les nombres entiers et strictement positifs. Ainsi, nous pourrions tout aussi bien ecrire : 
var retard : int=20 ; ou var retard : uint=20 ; . Cette recommandation est naturellement plus 
probante dans le cadre d'animations complexes et lourdes et se justifie un peu moins dans le cadre 
de cet exemple. 



A Tinterieur du bloc d'instruction de la fonction, entre les deux accolades, nous placons les 
actions. 

Le calcul que nous voulons effectuer repose sur un principe simple : il indique, pour chaque 
symbole, de le positionner en x et en y, a une valeur proportionnelle a la position du pointeur. 

Pour bien comprendre le precede, imaginons que Ton souhaite que chaque symbole soit 
positionne en suivant le pointeur en x et en y. Ce faisant, le groupe de symboles suivrait 
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strictement la position du pointeur si bien qu'il ne serait pas possible d'interagir avec les 
objets. Pour cela, nous indiquerions, pour chaque occurrence de symbole, ceci : 

photo1_mc . x=mouseX ; 
photo1_mc . y=mouseY ; 

Ann que le deplacement dispose d'un retardement, la position de l'occurrence doit tendre pro- 
gressivement vers la position du pointeur et non pas le suivre instantanement. Pour ce faire, 
nous incrementons done la position de l'occurrence d'une valeur qui diminue avec le temps. 

Pour obtenir une valeur qui diminue avec le temps, nous faisons en sorte que l'occurrence 
conserve d'abord sa position initiale. Nous utilisons done, dans notre calcul, photoljnc . x qui 
determine la position courante, en x, de l'objet que nous voulons rendre mobile : photo1_mc. 

Nous veillons ensuite a ce que l'occurrence finisse par atteindre la position du pointeur. 
Nous utilisons aussi pour cela mouseX. Comme le calcul est repete indefiniment, grace a 
l'evenement ENTER_FRAME, il est possible sans trop de complication de definir une valeur 
qui diminue progressivement avec le temps, comme suit. 

photoljnc . x+=(mouseX-photo1_mc.x) /retard; 
photoljnc . y+=(mouseY-photo1 jnc.y) /retard; 

Pour que la valeur diminue, nous incrementons ici la position de l'occurrence, d'abord en x, 
de la difference comprise entre sa position d'origine et celle du pointeur. Puis, cette valeur 
est divisee par le coefficient de retardement pour obtenir une valeur de plus en plus faible. 
Comme Taction est reexecutee perpetuellement, a chaque reduction de la distance entre le 
point d'origine et la position du pointeur, il reste une distance de plus en plus faible a par- 
courir dans un meme laps de temps. On obtient done un effet de ralenti. Decline en x et en 
y, pour les trois symboles presents sur la scene, nous obtenons : 

photoljnc . x+=(mouseX- photoljnc . x) /retard; 
photo2jnc . x+=(mouseX-photo2jnc. x) /retard ; 
photo3jnc .x+= (mouseX-photo3jnc .x) /retard ; 
photoljnc . y+= (mouseY-photol jnc . y ) /retard ; 
photo2jtic . y+= (mouseY-photo2jtic . y ) / retard ; 
photo3jnc . y+= (mouseY-photo3jnc . y) /retard ; 

Dans ce contexte, les occurrences se deplacent bien avec un amortissement par rapport a la 
position du pointeur, mais elles evoluent tous a la meme vitesse, ce qui donne une impres- 
sion d'immobilisme relatif. Pour que chaque occurrence avance desormais a un rythme dif- 
ferencie, il suffit de modifier l'impact du coefficient de retard en le divisant ou en le 
multipliant par un nombre indetermine, ou en le substituant completement a une valeur 
arbitraire tout simplement. Ce qui donne a present : 

// initialisation 

var retard:Number=20; 

// actions 

this. addEvent Listener (Event . ENTER J^RAME, navigation) ; 
function navigation(evt:Event) { 
// x 

photoljnc . x+= (mouseX- photoljnc . x) / retard ; 
photo2jnc.x+=(mouseX-photo2jnc.x) /(retard*2) ; 
photo3 jnc.x+= (mouseX- photo3jnc.x) /(ret ard*3) ; 
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// y 

photol _mc . y+=(mouseY- photol _mc .y) /retard; 
photo2_mc.y+=(mouseY-photo2_mc.y) /(retard*2) ; 
photo3_mc.y+=(mouseY-photo3_mc.y) /(retard*3) ; 



Calculer avec la classe Math 

Vous pouvez aussi determiner des valeurs progressives en utilisant la classe Math, notamment pour 
obtenir une progression sinusoi'dale. La classe Math offre differentes equations. Pour determiner, par 
exemple, la valeur de position en abscisse d'un symbole photojnc, inscrivez : 

■ Photo_mc.x=Math . ceil (75. 5) ; arrondit 75.5 a rentier positif superieur le plus proche, soit 75. 

■ Photo_mc.x=Math .f loor(75.5) ; arrondit 75.5 a rentier positif inferieur le plus proche, soit 76. 

■ Photojnc. x=Math.pow(75. 5,3) ; eleve la valeur passee en premier parametre avec la 
seconde. On obtient ici 3 375. 

■ Photojnc. x=Math. random () ; determine une valeur aleatoire comprise entre 0 et 1, sous 
forme decimale au centieme pres. Pour obtenir un nombre entier compris entre 0 et 99, multi- 
pliez la valeur decimale obtenue par 1 00, voire arrondissez au nombre entier le plus proche, 
commesuit : Photojnc. x=Math.ceil(Math.random() )*100; . 

■ Photojnc. x=Math. sin (75. 5) ; renvoie le sinus de la valeur en parametre. La valeur resultante 
est une valeur decimale comprise entre 1 et -1 exprimee en radians. Lorsque la valeur en para- 
metre progresse (comme i, dans le cadre d'une boucle avec i++ par exemple), la valeur oscille 
de 1 a -1 de maniere cyclique et permet de creer un mouvement d'oscillation (planete qui 
tourne, yoyo, pistons, etc). Le sinus de 0 vaut 1 et le cosinus de 0 vaut 0. 

■ Photojnc. x=Math. cos (75. 5) ; renvoie le cosinus de la valeur en parametre. La valeur resul- 
tante est une valeur decimale comprise entre -1 et 1 selon le meme principe que le sinus, mais la 
valeur est inversee. Le cosinus commence par -1 . 

■ Photojnc. x=Math.sqrt (75. 5) ; renvoie la racine carree de la valeur en parametre. Ici, on 
obtient 8,65. 

Conversion de degres en radians et inversement 

Les valeurs qui resultent de la classe Math . sinus ou Math . cosinus sont exprimees en radians. Un 
cercle compte 360 degres ou 2 Pi radians. En ActionScript, on exprime la valeur de PI avec la classe 
Math. PI. Ainsi, il est possible de convertir des degres en radians, comme suit : 

AngleEnRadians = AngleEnDegres x Math. PI/180 
Ou des radians en degres, comme suit : 

AngleEnDegres = AngleEnRadians C 180/Math.PI 



A retenir 

■ Pour apporter un effet d'amortissement a une animation geree en ActionScript, on incremente, a la 
position courante d'un objet, la position du pointeur moins la position de I'objet en question, que 
Ton divise par un coefficient. Plus le coefficient est eleve, plus I'acceleration est amortie. 
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Gerer le defilement de panoramiques en boucle 

Cet exemple propose un defilement panoramique ininterrompu. II est programme avec un 
gestionnaire de type ENTER_FRAME et contient des conditions. Ces conditions restaurent la 
position des elements du panoramique lorsqu'il atteint une certaine limite. Les elements 
composant le decor panoramique sont dupliques de part et d' autre afin de permettre, lorsque 
le defilement atteint sa limite, d'effectuer son repositionnement de maniere imperceptible 
(voir Figure 1.6). 

Figure 1.6 

Apercu 
de I'exercice. 
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Le document que nous utilisons presente la structure suivante : au-dessus du caique 
f ond_mc et sous le masque, le decor se compose de deux symboles, le ciel et une colline. 
Chacun de ces symboles contient une image prealablement travaillee dans Photoshop de 
sorte qu'elle peut etre dupliquee plusieurs fois de suite horizontalement sans que Ton ne 
percoive de rupture dans le graphisme. Nous obtenons une texture de type motif, qui rac- 
corde aussi bien a droite qu'a gauche l'image referente situee, elle, au centre de la composi- 
tion. Ainsi, dans Flash, a l'interieur de chaque symbole, l'image est repetee trois fois. Elles 
sont effectivement dupliquees de part et d' autre afin de permettre au symbole de sortir du 
champ visuel que constitue la largeur de la scene, sans pour autant laisser un vide dans le 
decor pendant le defilement. Ainsi, si le defilement s'effectue de gauche a droite, l'image 
placee a gauche comblera, en raccord, le trou que nous aurions pu percevoir si l'image 
n'avait pas ete dupliquee de ce cote-ci. Inversement, si le defilement se fait de droite a gau- 
che, l'image situee a droite, avec raccord, permet de ne pas voir le trou qui resulte du depla- 
cement du symbole, lorsque celui-ci est anime vers la gauche. 
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Chaque image est done placee d'abord une fois a l'origine du symbole (x = 0 et y = 0). Puis, 
elle est dupliquee une fois a gauche et une fois a droite, toujours a l'interieur du symbole qui 
contient l'image, de part et d'autre de l'emplacement initial de la premiere image. Les ima- 
ges repetees forment un ensemble continu et parfaitement homogene. La rupture entre cha- 
que image est imperceptible. Les deux symboles, ainsi mis en forme, sont places egalement 
a une abscisse de 0 sur la scene principale, en temoigne la position du centre de chacun de 
ces symboles (voir Figure 1.7). 

Figure 1.7 

Position du centre 
dans chaque 
symbole. 




Realiser une image de type motif, raccord, pour panoramiques. Pour realiser une image 
que vous pourrez repeter de maniere indeterminee de part et d'autre sans que I'on n'en percoive la 
rupture, procedez comme suit : 

1 . Dans Photoshop, ouvrez une image qui represente un decor ou une texture. 

2. Deverrouillez le caique principal et deplacez cette image hors champ, de sorte que I'un des cotes se 
retrouve au centre de la fenetre de document. Le reste du document est a present occupe par de la 
transparence. 

3. Dupliquez l'image et placez la copie vers la zone vide en faisant se chevaucher legerement les deux 
extremites de chaque image au centre du document. 

4. Puis, gommez (directement ou avec les masques de fusion) le bord de l'image dupliquee, pour reveler 
l'image originate situee en arriere-plan. Fusionnez au besoin les deux caiques. Vous devez eliminer 
toute rupture encore perceptible entre les deux images. Utilisez eventuellement I'outil Tampon pour 
retravailler plus precisement les zones de transition. 

5. Enfin, recadrez l'image de sorte que chaque extremite coincide avec I'autre. 

6. Exportez pour le Web au format JPEG ou PNG-24. 



Figure 1.8 

Structure du 
document. 
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En haut de la fenetre de scenario (voir Figure 1.8), le caique actions affiche le code suivant : 

// initialisation 

var sensDef ilement : Number=1 ; 

// actions 

this. addEvent Listener (Event . ENTER_FRAME, panoramiqueEnBoucle) ; 

function panoramiqueEnBoucle (evt:Event) { 
// defilement 

ciel_mc . x+=3*sensDef ilement ; 
collinejnc . x+=6*sensDef ilement ; 

// boucle 

if (sensDef ilement==-1 ) { 

if (ciel_mc. x<=sensDef ilement* (ciel_mc . width/3) ) { 
ciel_mc.x=0; 
} 

if (colline_mc . x<=sensDef ilement* (collinejnc .width/3) ) { 
collinejnc. x=0; 

} 

} else { 

if (cieljnc. x>=sensDef ilement* (cieljnc . width/3) ) { 
cieljnc.x=0; 

} 

if (collinejnc . x>=sensDef ilement* (collinejnc .width/3) ) { 

collinejnc. x=0; 

} 

} 

} 

Dans un premier temps, nous declarons la variable a utiliser : 

// initialisation 

var sensDef ilement : Number=1 ; 

La variable sensDef ilement indique ici le sens de defilement du panoramique. Une valeur 
de 1 induit un deplacement des symboles vers la droite. Une valeur de -1 indique un depla- 
cement des symboles vers la gauche. Notez bien que le sens du deplacement agit sur le posi- 
tionnement des objets dans la scene, et non sur la perception que Ton a de l'animation. 
Ainsi, si nous programmons le deplacement des symboles vers la droite, a la lecture de 
l'animation, nous percevons un mouvement panoramique qui s'oriente lui vers la gauche. 
Et, inversement, si les symboles se deplacent vers la gauche, nous percevons un panoramique 
qui evolue vers la droite. 

Nous creons ensuite le gestionnaire d'evenements qui permet d'executer le calcul du repo- 
sitionnement en continu grace a la classe Event et a l'evenement ENTER_FRAME. Ce gestion- 
naire appelle la fonction que nous avons nommee panoramiqueEnBoucle : 

// actions 

this . addEvent Listener (Event . ENTER J^RAME, panoramiqueEnBoucle) ; 

Nous placons alors, a la suite, la fonction en y introduisant, en parametre, le rappel de la 
classe Event sans lequel notre fonction ne saurait s'executer : 

function panoramiqueEnBoucle (evt:Event) { 
} 
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A l'interieur du bloc d' instruction de notre fonction, nous programmons d'abord le defilement 
des objets par incrementation : 

// defilement 

cieljnc . x+=3*sensDef ilement ; 
colline_mc . x+=6*sensDef ilement ; 

Nous pourrions utiliser une valeur arbitrairement positive ou negative directement ici, pour 
definir le sens du defilement et le pas, mais en la couplant avec notre variable, nous permet- 
tons d'automatiser l'inversion du defilement lorsque cela sera necessaire. II suffira alors de 
changer cette valeur une seule et unique fois, a 1' initialisation, plus haut dans le code. 
Le sens du defilement, declare en amont, sera alors effectif pour 1' ensemble de la fonction. 

Le pas d' incrementation n'ayant besoin d'etre mentionne qu'une fois, nous le specifions en 
revanche directement ici plutat que de le stacker dans une autre variable. Nous utilisons un 
pas de 3 pixels pour le ciel afin qu'il progresse plus lentement que la colline pour laquelle 
nous avons un pas de 6 pixels. Cela permet d'accentuer ici aussi l'effet volumetrique ; effet 
que nous pouvons de nouveau combiner avec un leger filtre flou. 

Une fois le defilement active, nous pouvons definir les conditions a verifier pour restaurer la 
position d'origine des symboles de sorte que l'effet boucle soit continu. Aussi, une premiere 
structure conditionnelle de type if doit etre creee : 

if (ciel_mc.x<=sensDefilement*(ciel_mc. width/3)) { 

// action 

} 

Cette condition verifie que la position du ciel en x (ciel_mc . x) est inferieure ou egale a la 
position limite de l'image (sensDef ilement* (ciel_mc .width/3)), juste avant qu'elle 
bascule hors champ, soit ici a -800 pixels, car 800 pixels correspondent a la largeur effec- 
tive de l'image et, en negatif, le deplacement se fait vers la gauche de la scene, done, 
avant 0. 

Plus precisement, pour obtenir cette valeur, nous utilisons la variable sensDef ilement qui 
indique le sens de defilement. Si le sens de defilement doit etre positif (done, defiler de gau- 
che a droite), sensDef ilement vaut 1. Si le sens de defilement doit etre negatif (done, 
deiler de droite a gauche), sensDef ilement vaut -1. 

Au sens de defilement, nous ajoutons la largeur du symbole qui contient trois fois l'image 
de reference (cieljnc .width), divisee par le nombre d'images qu'il contient, en l'occur- 
rence 3 (parce que nous avons duplique l'image trois fois dans le symbole). Nous obtenons 
ainsi la largeur effective d'une et une seule image. 

Une fois cette condition verifiee a partir de l'ensemble de ces valeurs, nous replacons l'objet 
a sa position d'origine qui est 0. Nous obtenons ceci : 

if (cieljnc . x<=sensDef ilement* (ciel_mc .width/3) ) { 
cieljnc. x=0; 

} 

Calculer un pas d incrementation. Lorsque vous animez les proprietes et les deplacements par 
incrementation de valeur, et que vous souhaitez modifier le cours de I'animation des qu'une certaine 
valeur est atteinte, pensez que la valeur du pas decrementation est determinants pour que la condi- 
tion soit verifiable. Par exemple, si je deplace un objet en x, sur un pas de 7 pixels, et que sa position 
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de depart est 0, je ne pourrai verifier qu'une limite est atteinte que si je verifie que sa nouvelle posi- 
tion est une valeur multiple de 7. Ainsi, lorsque je verifie que I'objet atteint strictement 800 pixels 
avec : if (monObj et_mc . x==800) , avec un pas de 7, la condition ne sera jamais remplie, car 800 
n'est pas un multiple de 7. Alors que la condition (monObjet_mc.x>=800), elle, sera executee, 
car 805, qui est un multiple de 7, est bien superieur ou egal a 800. Afin d'atteindre une valeur multi- 
ple de 800, nous privilegions done un pas de 5 pixels. Mais, meme avec cette precaution, un trou 
de 5 pixels (805 - 800 = 5) peut faire apparaitre encore une rupture dans le defilement. II convient 
done de bien calculer le rapport entre le pas decrementation (5), la largeur du document (800) et la 
condition a remplir (800-5), pour que I'ensemble soit homogene et empeche le dernier pas decre- 
mentation d'afficher un trou. 

Eviter les images tremblantes. Vous obtenez toujours de meilleurs resultats a I'affichage lorsque 
les objets sont places a des valeurs qui correspondent a des chiffres entiers. La position des objets est 
en effet determines en pixels et un pixel est par nature indivisible. Lorsqu'un objet atteint un position- 
nement exprime en valeur decimale, vous risquez d'obtenir un scintillement leger, voire un flou, sur 
les images ou les textes que vous positionnez. Verifiez done toujours que vos symboles, dans une 
composition graphique, sont places initialement a des valeurs entieres. Pour cela, selectionnez les 
objets individuellement et depuis I'lnspecteur de proprietes, ajustez si besoin les valeurs correspon- 
dant aux proprietes x et y. 

La condition de bouclage est maintenant verifiee pour le ciel. Nous declinons cette verification 
pour la colline. Nous ob tenons : 

if (cieljnc . x<=sensDef ilement* (ciel_mc .width/3) ) { 
ciel_mc.x=0; 

} 

if (colline_mc.x<=sensDef ilement* (collinejnc. width/3) ) { 
colline_mc.x=0; 

} 

L' animation fonctionne, a ce stade, pour un defilement a gauche. Mais si nous voulons 
decliner la fonction pour un defilement a droite, nous devons inverser aussi le signe infe- 
rieur (<) present dans la condition. Pour ce faire, nous doublons les actions en utilisant une 
nouvelle structure conditionnelle de type if, dans laquelle nous verifions simplement la 
valeur du sens du defilement. Si la valeur est negative, alors, le signe est inferieur. Sinon, le 
signe devient superieur. Nous obtenons : 

// initialisation 

var sensDef ilement : Number=1 ; 

// actions 

this . addEvent Listener (Event . ENTER_FRAME, panoramiqueEnBoucle) ; 
function panoramiqueEnBoucle (evt:Event) { 
// defilement 

ciel_mc . x+=3*sensDef ilement ; 
collinejnc . x+=6*sensDef ilement ; 

// boucle 

if (sensDef ilement==-1 ) { 

if (ciel_mc. x<=sensDef ilement* (ciel_mc . width/3) ) { 
cieljnc. x=0; 

} 

if (collinejnc. x<=sensDef ilement* (collinejnc . width/3) ) { 
collinejnc. x=0; 

} 
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} else { 

if (ciel_mc. x>=sensDef ilement* (cieljnc . width/3) ) { 
ciel_mc.x=0; 

} 

if (colline_mc . x>=sensDef ilement* (collinejnc .width/3) ) { 
colline_mc.x=0; 

} 

} 

} 

A retenir 

■ Pour creer une animation en boucle, il faut verifier, avec une structure conditionnelle, les limites 
d'incrementation des valeurs affectees aux proprietes des objets animes, et restaurer ensuite ces 
proprietes a leurs valeurs initiates, une fois les limites atteintes. 

■ Pour creer plus specifiquement un panoramique en boucle, nous utilisons des images dont les extre- 
mites se confondent afin de rendre imperceptible leur duplication dans I'environnement auteur de 
Flash. 

■ Pour que I'animation en boucle soit homogene, nous devons verifier que le pas d'incrementation 
est compatible avec les valeurs verifiees dans les conditions et avec les mesures du document. 

■ Une animation est plus fluide si les objets qu'elle contient sont positionnes sur des valeurs entieres. 

■ Le typage uint ou int est plus optimise que le typage Number, mais n'autorise que des nombres 
entiers, voire entiers positifs. 

■ L'utilisation de variables permet d'eviter de redefinir manuellement une serie de valeurs lorsqu'une 
seule information doit etre modifiee, comme le sens de defilement d'un panoramique, par exemple. 



Synthese 

Dans ce premier chapitre, vous avez vu comment realiser des animations entierement 
concues en ActionScript, sans utiliser les options d' interpolation du scenario. Vous avez 
appris a les adapter a vos creations quelles qu'en soient les dimensions, a automatiser, grace 
a la classe Event, certains processus en exploitant des variables, a generer des effets 
d'amortissement et des effets de boucle avec a l'utilisation de structures conditionnelles. 
Vous etes en mesure, a present, d'animer vos mises en forme en gardant les objets distribues 
sur la scene, sur une seule image du scenario, et simplifier ainsi vos futurs developpements. 
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Introduction 

Nous avons vu, au chapitre precedent, comment animer des objets directement avec 
ActionScript. Pour realiser des animations plus complexes que celles realisees manuelle- 
ment en ActionScript, et y ajouter une acceleration, un effet de rebond, l'enchainement de 
plusieurs interpolations successives ou y ajouter 1' interpolation de proprietes, nous utilisons 
des classes ActionScript preprogrammees, plus simples a manipuler. 

Le principe d'une classe est de rassembler sous la forme d'un fichier texte, un ensemble 
d' instructions a executer, pour un ou plusieurs parametres donnes. Les classes d'animation 
que nous presentons dans ce chapitre permettent de specifier en une seule instruction le nom 
d'un objet, les proprietes a animer, la duree de l'animation et le type d'effet d' acceleration 
voulu ou non. C'est le compilateur Flash qui, a l'aide de la classe importee pendant la publi- 
cation, convertit la ligne d' instruction en animation a la publication. II devient done enfan- 
tin, a partir de quelques lignes de code, de realiser des interfaces riches, animees et 
dynamiques, Ces animations peuvent naturellement etre ajustees selon la valeur des para- 
metres passes a l'execution. 

Ces classes se nomment Tween, TweenLite, TweenMax, Caurina, AS3AnimationSystem 
ou Twease. Si la classe Tween est native dans l'API de Flash, les classes TweenLite et 
TweenMax sont elles disponibles gratuitement sur le site http://blog.greensock.com. Les 
classes Caurina, AS3AnimationSystem et Twease, moins usitees, sont disponibles toute- 
fois sur http://code.google.eom/p/tweener sous la denomination Tweener pour les deux 
premieres, et sur http://code.google.eom/p/twease pour la troisieme. TweenMax permet de 
realiser ce que propose TweenLite et represente la classe la plus fiable et aboutie de tou- 
tes. Nous abordons done, dans ce chapitre, avec la classe Tween native deja disponible 
dans votre application, et TweenMax, qui offre plus de possibilites et une plus grande 
stabilite. 

Animer une galerie avec la classe Tween integree 

Dans cet exemple, un decor multi-plans, compose de clips distincts, est anime des 
l'execution du document. Lorsque l'utilisateur survole l'une ou l'autre des Heches 
signaletiques situees de part et d'autre du decor panoramique, celui-ci se deplace dans 
un sens ou dans l'autre a des vitesses differentes. Des animations se succedent les unes 
aux autres. 

La specificite de cet exemple est que chaque animation repose sur la classe Tween, native de 
Flash, simple d'utilisation (voir Figure 2.1). 
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Figure 2.1 

Apercu 

de I'exercice. 




Exemples > ch2_interpolationEtlnteractiviteAvecClassesTweenEtTweenMax_l .fla 

Le document que nous utilisons presente la structure suivante : dans la scene, au-dessus du 
caique f ond_mc, un ensemble de MovieClip et Bouton se repartissent sur divers caiques. 
Chaque caique porte le nom de l'occurrence de l'objet qu'il contient (voir Figure 2.2). Le 
symbole pano_mc contient d'autres symboles dont certains sont caches derriere un rideau. 
Ces symboles caches sont egalement des MovieClip. lis possedent, dans leurs propres scena- 
rios, des animations qui seront activees lors de leur survol par la souris (voir Figures 2.3 et 2.4). 



Figure 2.2 
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Figure 2.3 

Apercu des 
symboles caches 
derriere le rideau. 
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Figure 2.4 

Apercu du scena- 
rio d'un des 
symboles caches. 





9 a Q 1 


5 




) 15 


2 


] 


25 : 








□ 


□ 








iJ Guide Caique 1 


• • ■ 




D 










J fillre 




















jj -l 3 


li M 


■ □ % K 19 .*9,Q"t fiJ 





Dans la partie superieure du scenario de la scene principale, le caique actions affiche le 
code suivant : 

// initialisation 

import fl. transitions. Tween; 
import fl . transitions . easing .* ; 
import f 1 .transitions . TweenEvent ; 

var tweenMurX:Tween; 
var tweenBusteX:Tween; 
var tweenLustreX:Tween; 
var tweenLampeX:Tween; 
var tweenRideauX: Tween; 



// actions 

// animation d ' introduction 

tweenMurX= new Tween (panojnc, "x", Strong. easeOut, 715, 400, 4, true); 
tweenBusteX= new Tween (buste_btn, "x", Strong . easeOut , 260, -260, 4, true); 
tweenLustreX= new Tween (lustre_mc , "x", Strong . easeOut , 880, 400, 4, true); 
tweenLampeX= new Tween (lampe_mc, "x", Strong . easeOut , 1400, 180, 4, true); 

// fleche gauche 

f lecheGauche_btn . addEvent List ener (MouseE vent . MOUSE_OVER, def ilementGauche) ; 
function def ilementGauche (evt :MouseEvent) { 
flecheGauche_btn.useHandCursor = false; 

tweenMurX= new Tween (pano_mc, "x", Strong. easeOut, panojnc. x, 690, 3, true); 
tweenBusteX= new Tween (buste_btn, "x", Strong. easeOut, buste_btn.x, 40, 3, true); 
tweenLustreX= new Tween (lustrejnc, "x", Strong. easeOut, lustre_mc.x, 700, 3, true); 
tweenLampeX= new Tween (lampe_mc, "x", Strong. easeOut, lampe_mc.x, 430, 3, true); 
tweenMurX. addEvent List ener (TweenEvent .MOTION_FINISH, apresTweenl ) ; 

} 

function apresTweenl (evt : TweenEvent) { 
f lecheGauche_btn . visible=f alse ; 
f lecheDroite_btn . visible=true; 

tweenRideauX= new Tween (panojnc . rideau_mc , "scaleX", Back. easeOut, 
panojnc . rideaujnc . scaleX, 0.2, 2, true); 

} 

// fleche droite 

f lecheDroitejDtn . addEvent List ener ( MouseE vent . MOUSE jDVER, def ilementDroite) ; 
function def ilementDroite (evt :MouseEvent) { 

flecheDroite_btn.useHandCursor = false; 

f lecheGauche_btn . visible=t rue ; 

f lecheDroite_btn . visible=f alse ; 

tweenMurX= new Tween (panojnc, "x", Strong. easeOut, panojnc. x, 110, 4, true); 
tweenBusteX= new Tween (buste_btn, "x", Strong. easeOut, bustejrtn.x, -560, 4, true); 
tweenLustreX= new Tween (lustrejnc, "x", Strong. easeOut, lustrejnc. x, 200, 4, true); 
tweenLampeX= new Tween (lampejnc, "x", Strong. easeOut, lampejnc.x, 100, 4, true); 

} 
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// actions boutons caches derriere le rideau, dans le clip pano_mc 

// poupee 

pano_mc . poupee_btn . addEventListener(MouseEvent .M0USE_0VER, roll) ; 
panojnc . poupee_btn . addEvent List ener (MouseEvent .M0USE_0UT, out ) ; 

// sac 

panojnc . sac_btn . addEvent List ener (MouseEvent . M0USE_0VER, roll) ; 
pano_mc . sac_btn . addEvent List ener (MouseEvent . M0USE_0UT, out ) ; 

// robe 

panojnc . robejDtn . addEvent List ener (MouseEvent . MOUSE JDVER, roll) ; 
panojnc . robejDtn . addEvent List ener (MouseEvent . MOUSE JDUT, out) ; 

// fonctions 

function roll (evt :MouseEvent) { 
evt . currentTarget . gotoAndPlay (2) ; 

} 

function out (evt :MouseEvent) { 

evt. currentTarget. gotoAndPlay(11 ) ; 

} 

La programmation de notre animation se decompose en plusieurs etapes. Nous commen- 
cons par programmer le deplacement des symboles de la scene principale. Puis, nous ajou- 
tons de 1'interactivite sur les fleches droite et gauche placees aux bords du document. Enfin, 
nous ajoutons des actions pour controler l'interactivite avec les boutons caches derriere le 
rideau de sorte qu'ils reagissent au passage du pointeur. 

Le code se decompose comme suit. D'abord, nous importons les classes requises : 

// initialisation 

import fl. transitions. Tween; 
import fl . transitions . easing .* ; 
import f 1 .transitions . TweenEvent ; 

Pour creer des animations a partir de la classe Tween, nous devons d'abord importer la 
classe Tween et ses classes derivees. Nous pouvons alors declarer de nouvelles animations 
et les associer a des evenements souris. 

Dans le code, le terme import indique de charger une classe externe non incluse dans l'API 
de Flash. En l'occurrence, la classe Tween native figure, non pas dans l'API du logiciel, 
mais dans un dossier place a cote de l'application Flash sur le systeme. II n'est done pas 
necessaire de placer physiquement ces classes pres de notre document . f la pour les impor- 
ter ni de les telecharger pour en disposer. II suffit de les appeler directement la ou elles se 
trouvent pres de votre application sans les deplacer. 

Localiser les classes natives de Flash. Sur Macintosh, les classes natives sont disponibles dans le 
dossier nomme fl qui se trouve dans le repertoire de ('application : Applications > Adobe Flash CS4 > 
Common > Configuration > ActionScript 3.0 > Projects > Flash > sre > fl... 

Sous Windows, elles sont localisees dans le repertroire de l'application Flash, de la meme maniere, 
depuis Program files > Adobe > Flash CS4. 

Le terme f 1, lorsqu'il est indique a la suite de import, indique a l'API de Flash de localiser 
ce repertoire qu'il sait identifier dans le dossier de l'application Flash, et a partir duquel il va 
chercher la classe ciblee dans le reste du chemin indiquee dans nos lignes de code. Dans 
notre exemple, Flash va done importer les classes Tween et TweenEvent, qui se trouvent a la 
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racine du repertoire transitions, a l'interieur de f 1, puis, l'ensemble des classes dispo- 
nibles contenues dans le dossier easing, lui-meme situe a la racine du meme dossier tran- 
sitions. 

Nous aurions pu simplifier en supprimant la derniere ligne et en remplacant le terme Tween 
par un asterisque comme nous l'avons fait pour easing. Nous aurions alors obtenu : 

import f 1 . transitions .* ; 
import fl . transitions . easing .* ; 

Toutes les classes alors contenues dans le repertoire mentionne avant 1' asterisque sont sys- 
tematiquement importees, a l'exception des classes qui figurent dans des sous-repertoires. 
C'est la raison pour laquelle nous garderions neanmoins la deuxieme ligne. Mais en gardant 
perceptible le nom des classes principales que nous allons utiliser, nous conservons une 
visibilite sur le nom des classes qui specifiquement nous interessent ici et nous aident a 
mieux apprehender les instructions. 

Nous abordons aussi, a la section suivante, le moyen de centraliser les classes ajoutees en 
redefinissant les chemins de classe (classPath) a partir des preferences du systeme. 



I 



Que risque-t-on a abuser de l asterisque a ( importation des classes ? Rien. Meme si vous 
citez toutes les classes d'un repertoire avec un asterisque, seules celles qui sont vraiment utilisees dans 
le code de votre document Flash seront compilees a la publication. Cela n'alourdit done nullement 
votre document. 



Une fois que ces classes sont importees, les animations Tween peuvent etre creees : 

var tweenMurX:Tween; 
var tweenBusteX:Tween; 
var tweenLustreX:Tween; 
var tweenLampeX:Tween; 
var tweenRideauX: Tween; 

D'abord, il faut reserver de nouveaux espaces memoire pour contenir ces animations. Nous 
creons done autant de variables que nous souhaitons creer d' interpolations (tween signifie 
interpolation en anglais). Chaque nouvelle variable doit etre typee pour un espace de type 
Tween. Tween est la classe que nous avons importee et qui permet a Flash de comprendre de 
quoi il retourne lorsque nous 1' employ ons. 

Pour faciliter 1' identification des interpolations, dans le nom des variables, nous introduisons 
arbitrairement le nom de l'objet a animer ainsi que la propriete concernee. 

Maintenant que le typage est realise, nous pouvons animer : 

// actions 

// animation d ' introduction 

tweenMurX= new Tween (pano_mc, "x", Strong. easeOut, 715, 400, 4, true); 
tweenBusteX= new Tween (buste_btn, "x", Strong . easeOut , 260, -260, 4, true); 
tweenLustreX= new Tween (lustre_mc, "x", Strong . easeOut , 880, 400, 4, true); 
tweenLampeX= new Tween (lampe_mc, "x", Strong . easeOut , 1400, 180, 4, true); 

Les lignes de code qui suivent 1' initialisation reprennent les noms des interpolations que 
nous avons typees et y definissent un nouvel objet interpolation. Ces interpolations sont 
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caracterisees par l'objet new Tween ( ) et une serie de parametres qui autorisent le controle 
de 1' animation. Ces parametres sont : 

new Tween( objet, "propriete", acceleration, valeur de depart, 
valeur d'arrivee, duree, type de duree). 

• Objet. Nom de l'objet a interpoler. Par exemple : pano_mc. 

• Propriete. Entre guillemets, indique le nom de la propriete a animer. Par exemple : x, y, 
scaleX, scaleY, rotation, alpha, width ou height. 

• Acceleration. La methode d' acceleration de transition utilisee, en rapport a la classe 
easing. Par exemple : Back, Bounce, Elastic, None, Regular ou Strong (voir 
Tableau 2.1). Ces valeurs sont associees a un comportement qui determine si l'effet doit 
etre applique au debut de 1' animation, a la fin ou les deux simultanement, avec les para- 
metres respectifs : easeln, easeOut ou easelnOut. 

• Valeur de depart. La valeur a appliquer a la propriete de l'objet anime au debut de 
l'interpolation. Cette valeur doit correspondre a la valeur attendue par la propriete ani- 
mee. Ainsi, pour une transition sur l'axe des x, on utilisera un nombre entier positif, nul 
ou negatif ou une expression qui nous permet de la determiner. L' expression pano_mc . x 
designe par exemple la position courante de l'objet pano_mc en x, ou toute autre expres- 
sion, pourvu que le resultat soit un nombre de preference entier et positif, nul ou negatif. 
Une rotation appellera une valeur exprimee en degres positifs ou negatifs (de 0 a 360 
par exemple). Un alpha appellera une valeur decimale comprise entre 0 et 1. 

• Valeur d'arrivee. La valeur de la propriete animee en fin d'interpolation, sur le meme 
principe que la valeur de depart. 

• Duree. La duree de l'interpolation. Un nombre entier positif est demande. 

• Type de duree. Requiert une valeur booleenne qui indique si la valeur indiquee pour la 
duree doit etre exprimee en nombre d'images ou en secondes. Inscrire false pour une 
valeur a exprimer en images. Inscrire true pour une valeur exprimee en secondes. 

Tableau 2.1 : Definition des methodes de transition easing. 



Back 
Bounce 

Elastic 

None 

Strong 

Regular 

easeln, 
easeOut et 
easelnOut 



Back permet de creer un effet de rebond unique avec une acceleration. L'objet part dans une direction 
donnee, depasse legerement le point d'arrivee et revient au point d'arrivee defini par la valeur d'arrivee. 

Bounce genere un effet de rebond multiple qui, a la difference de Elastic, ne depasse pas la 
valeur definie au point d'arrivee de l'interpolation. Leffet diminue progressivement et est egalement 
proportionnel a la distance entre la valeur de depart et la valeur d'arrivee de l'interpolation. 

Elastic genere un effet de rebond multiple qui depasse la valeur definie au point d'arrivee de 
l'interpolation. L'effet diminue progressivement et est proportionnel a la distance entre la valeur de 
depart et la valeur d'arrivee de l'interpolation. 

None neutralise les effets. 

Strong ajoute une acceleration predefinie simple a l'interpolation. 

Regular permet de creer une interpolation lineaire sans effet, tres legerement plus amortie que 
None. Mais ceci est presque imperceptible. 

Ces parametres, ajoutes aux precedents, determinent, en plus, si l'effet d'acceleration specifie par 
Back, Bounce, Elastic, None, Regular ou Strong, doit etre applique au debut de I'animation 
(on ajoute alors .easeln), a la fin de I'animation (on ajoute alors .easeOut) ou les deux (on 
ajoute dans ce cas .easelnOut). 
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A ce stade de la progr animation, 1' animation d' introduction fonctionne de maniere auto- 
nome. Nous poursuivons avec l'interactivite associee aux fleches gauche et droite : 

// fleche gauche 

f lecheGauche_btn . addEvent List ener (MouseE vent . MOUSE_OVER,def ilementGauche) ; 
function def ilementGauche (evt :MouseEvent) { 
// actions 

} 

D'abord, un ecouteur est attache a la fleche gauche. Cet ecouteur appelle la classe Mouse- 
Event pour designer un evenement de type souris. Nous precisons, derriere la classe 
MouseEvent, qu'il s'agit plus specifiquement du survol de la souris sur l'objet auquel est 
rattache V ecouteur, done, la fleche gauche. Au survol, nous appelons V execution de la fonction 
nommee roll developpee ci-dessous. 

Dans cette fonction, qui reprend le nom de la classe appelee avec evt : MouseEvent, nous 
commencons par rendre invisible la main qui apparait au survol du bouton fleche arm de 
rendre l'effet plus elegant : 

f lecheGauche_btn . useHandCursor = false; 

A la suite, nous activons de nouvelles interpolations, comme nous F avons fait pour 1'animation 
d' introduction : 

// fleche droite 

f lecheDroiteJrtn . addEventListener (MouseEvent . M0USE_0VER , def ilementDroite) ; 
function def ilementDroite (evt: MouseEvent) { 

flecheDroite_btn. useHandCursor = false; 

f lecheGauche_btn . visible=true ; 

f lecheDroiteJrtn . visible=f alse ; 

tweenMurX= new Tween (pano_mc, "x", Strong. easeOut, pano_mc.x, 110, 4, true); 
tweenBusteX= new Tween (buste_btn, "x", Strong. easeOut, buste_btn.x, -560, 4, true); 
tweenLustreX= new Tween (lustre_mc, "x", Strong. easeOut, lustre_mc.x, 200, 4, true); 
tweenLampeX= new Tween (lampe_mc, "x", Strong. easeOut, lampe_mc.x, 100, 4, true); 

} 

Etant donne que nous avons deja type les interpolations pour 1' introduction et que les 
proprietes et les objets animes ne changent pas, nous pouvons directement creer de nou- 
velles interpolations sans avoir a redefinir de nouvelles variables. Ce sont les memes 
interpolations. Elles sont simplement mises a jour avec de nouvelles valeurs placees en 
parametre. 

Dans la premiere interpolation, comme dans les suivantes, nous relevons cependant une nuance : 

tweenMurX= new Tween (pano_mc, "x", Strong. easeOut, pano_mc.x, 110, 4, true); 

La valeur utilisee pour designer le point de depart de 1' interpolation est une expression : 
panojnc . x. 

Plus loin, a la fin de la fonction appelee pour la fleche gauche, un ecouteur est attache a l'un 
des objets interpolation que nous venons d'utiliser. II permet, grace a la classe TweenEvent 
que nous avons importee plus haut, d'executer une nouvelle fonction lorsque 1' interpolation 
est terminee. Nous associons alors, a la classe TweenEvent, l'evenement MOTION_FINISH 
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pour appeler la nouvelle fonction (consultez le Tableau 2.2 pour connaitre les differents 
evenements disponibles avec cette classe) : 

tweenMurX.addEventListener(TweenEvent.MOTION_FINISH, apresTweenl ) ; 
} 

function apresTweenl (evt:TweenEvent) { 

} 

Stabiliser une interpolation Tween. Si vous appliquez une nouvelle Interpolation Tween sur un 
objet deja en cours d'interpolation Tween, si la duree de la nouvelle interpolation est inferieure ou 
egale a I'interpolation en cours, elle perd le controle de I'objet anime. En revanche, si cette interpola- 
tion est plus longue, elle devient prioritaire. Pour stabiliser une interpolation Tween qui ne s'acheve 
pas correctement, il convient done de modifier la duree de chaque interpolation de sorte que la der- 
niere executee soit toujours plus longue que celle eventuellement en cours ou d'interrompre les 
autres interpolations (voir Tableau 2.2). 



Tableau 2.2 : Definition des enchainements de la classe TweenEvent. 



M0TI0N_ 


CHANGE 


Indique que I'interpolation se joue. 


M0TI0N_ 


FINISH 


Indique que I'interpolation est terminee. 


M0TI0N_ 


_L00P 


Indique que la lecture de I'interpolation a repris depuis le debut, en mode boucle. 


M0TI0N_ 


RESUME 


Indique que la lecture de I'interpolation a repris, apres une pause. 


M0TI0N_ 


START 


Indique que la lecture du mouvement a commence. 


M0TI0N_ 


_ST0P 


Indique que I'objet Tween a ete interrompu par un . stop ( ) . Cet evenement peut etre deploye 
pour prevenir, par exemple, de toute intervention de I'utilisateur qui souhaite interrompre une 
interpolation en cours d'execution afin d'eviter que I'interpolation ne bogue. Notez cependant 
que la classe Tween supporte mal I'interruption d'interpolations en cours et de ce fait, oblige a 
realiser des animations rapides et de courte duree. Lorsqu'une interpolation se joue et qu'un 
utilisateur souhaite cliquer, par exemple, sur un objet en mouvement pour appeler un contenu, il 
est souhaitable d'interrompre avec leNomDeMonTween . stop ( ) I'animation en cours. Le cas 
echeant, le document execute peut devenir tres instable. Pour des animations plus stables et 
plus longues, la classe TweenMax, qui supporte mieux cette contrainte, sera privilegiee. 



Dans cette nouvelle fonction, nous demandons de modifier la visibilite des fleches puis de 
lancer une nouvelle interpolation qui va, elle, deformer le rideau de maniere a reveler les 
boutons caches a 1'arriere-plan de celui-ci. Nous utilisons ici la propriete scaleX et des valeurs 
decimales car l'echelle est definie a 0 pour 0 %, et a 1 pour 100 % : 

tweenMurX.addEventListener(TweenEvent.MOTION_FINISH, apresTweenl ) ; 
} 

function apresTweenl (evt :TweenEvent) { 
f lecheGauche_btn . visible=f alse ; 
f lecheDroite_btn . visible=true; 

tweenRideauX= new Tween (panomc. rideau mc, "scaleX", Back.easeOut, 
pano_mc.rideau_mc.scaleX, 0.2, 2, true); 

} 

Avant I'interpolation, ou apres, peu importe, nous rendons egalement invisible le bouton 
fleche gauche pour eviter que I'utilisateur ne lance a plusieurs reprises I'animation. Comme 
I'animation deplace le decor lateralement, si nous l'executions indefiniment, le decor fini- 
rait par sortir completement de la scene. Comme nous utilisons ici un bouton pour amorcer 
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T animation, il n'est pas necessaire de recourir a des structures conditionnelles comme nous 
l'aurions fait au chapitre precedent. II suffit, en effet, apres 1' interpolation de masquer inte- 
gralement ce qui permet de lancer 1' animation, le bouton fleche gauche : 

f lecheGauche_btn . visible=f alse ; 

Inversement, si nous masquons la fleche gauche pour eviter de sortir vers la gauche, nous 
devons permettre a l'utilisateur de revenir vers la droite, de l'autre cote du decor, lorsque 
nous sommes a l'autre extremite de celui-ci. Nous forcons done la visibilite de la fleche 
droite au moment ou la fleche gauche disparait, arm de prevenir le cas oil la fonction asso- 
ciee a la fleche droite (qui rend invisible la fleche droite) aura ete executee prealablement 
par d'autres fonctions : 

f lecheDroite_btn . visible=true ; 

A la suite, de la meme maniere que nous avons cree Taction pour la fleche gauche, figurent 
celles utilisees pour la fleche droite, mais sans enchainement d' animation car le rideau n'est 
present que d'un cote de la scene : 

// fleche droite 

flecheDroite_btn.addEventListener(MouseEvent .MOUSE_OVER,defilementDroite) ; 
function defilementDroite (evt:MouseEvent) { 

flecheDroite_btn.useHandCursor = false; 

f lecheGauche_btn . visible=true ; 

f lecheDroite_btn . visible=f alse ; 

tweenMurX= new Tween (pano_mc, "x", Strong.easeOut, pano_mc.x, 110, 4, true); 
tweenBusteX= new Tween (buste_btn, "x", Strong.easeOut, buste_btn.x, -560, 4, true); 
tweenLustreX= new Tween (lustre_mc, "x", Strong.easeOut, lustrejnc.x, 2B0, 4, true); 
tweenLampeX= new Tween (lampejnc, "x", Strong.easeOut, lampejnc.x, 100, 4, true); 

} 

Enfin, nous terminons avec des actions placees sur les boutons caches, qui permettent de 
signaler une possible interaction, au passage de la souris. Les actions appelees a travers les 
ecouteurs lancent 1' animation contenue dans le scenario de chaque bouton. 

Chaque ecouteur dont nous disposons utilise la classe MouseEvent a laquelle chacune des 
deux fonctions roll et out se refere via le terme evt. En reprenant, dans chaque fonction, 
le terme evt, nous pouvons alors invoquer la classe MouseEvent. En y associant en plus la 
propriete currentTarget, nous ciblons, plus specifiquement, chacun des objets ecoutes 
vehicule par la classe MouseEvent. Ainsi, il n'est pas necessaire de repeter maintes fois la 
meme fonction et la decliner pour chaque bouton si les actions sont communes. II suffit de 
remplacer le nom de l'occurrence ciblee (panojnc . poupee_btn, pano_mc . sac_btn et 
panojnc . robe_btn) par l'expression evt . currentTarget et les fonctions roll et out 
seront actives pour chacun des ecouteurs s'y referant (voir Figure 2.4). 

Cette animation s'arrete au premier stop rencontre. La fonction nominee out prolonge ces 
animations lorsque le pointeur quitte la surface des memes boutons. 

// poupee 

panojnc . poupee_btn . addEvent Listener (MouseEvent .M0USE_0VER, roll) ; 
panojnc . poupee jDtn . addEvent Listener (MouseEvent .MOUSE _0UT, out ) ; 

// sac 

panojnc . sac Jot n . addEvent Listener (MouseEvent . M0USE_0VER, roll) ; 
panojnc . sac Jot n . addEvent Listener (MouseEvent . MOUSE JDUT, out ) ; 
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// robe 

pano_mc . robe_btn . addE vent List ener (MouseE vent .MOUSE_OVER, roll) ; 
pano_mc . robe_btn . addEvent List ener (MouseE vent .MOUSE_OUT, out ) ; 

// fonctions 

function roll (evt :MouseEvent) { 
evt .currentTarget . gotoAndPlay (2) ; 

} 

function out (evt :MouseEvent) { 

evt. currentTarget. gotoAndPlay(11 ) ; 

} 

A retenir 

■ La classe Tween est simple d'utilisation car elle ne necessite pas de disposer des classes correspon- 
dantes a cote du document Flash pour les utiliser. II suffit de les importer en ciblant les repertoires 
situes dans le dossier Applications du systeme. 

■ II est possible d'enchainer plusieurs animations en utilisant la classe TweenEvent, suivie de I'evenement 

MOTION_FINISH. 

■ Les interpolations de la classe Tween permettent d'animer les proprietes x, y, scaleX, scaleY, 
rotation, alpha, width et height d'objets affiches par le lecteur Flash. 

■ Les valeurs utilisees en parametre pour definir les caracteristiques d'une interpolation Tween peuvent 
resulter d'expressions. 

■ Les classes Tween doivent cependant etre utilisees avec parcimonie pour preserver la stabilite de vos 
creations. Pour des animations plus elaborees, preferez la classe TweenMax. 

■ La classe Tween supporte mal les interventions utilisateur qui interrompent son processus. Privilegiez 
des interpolations de courte duree pour palier a cette contrainte ou utilisez la classe TweenMax. 

■ La propriete currentTarget permet de cibler directement plusieurs occurrences a travers une seule 
fonction et evite de creer des fonctions similaires contenant les memes instructions. 



Animer une carte interactive avec la classe TweenMax 

La classe Tween native de Flash est simple, mais tres vite limitee en possibilites des lors que 
Ton souhaite veritablement realiser des animations plus elaborees. II est difficile en effet de 
multiplier les proprietes sur un meme objet sans accroitre egalement le nombre de lignes 
de code. La multiplication des lignes de code avec des interpolations de type Tween rend 
d'autant plus instable le fichier qui les execute et de fait, limite reellement l'utilisabilite de 
la classe native. 

Pour disposer de classes d'interpolation plus souples et plus stables, nous preferons utiliser 
la classe TweenMax disponible gratuitement sur le site http://blog.greensock.com/ 
tweenmaxas3. Cette classe est egalement disponible en AS2 a l'adresse http://blog.green- 
sock.com/tweenmaxas2. Elle permet, outre 1' interpolation a partir de proprietes, de gerer 
1' acceleration bien sur, mais aussi de placer sur 1' interpolation en cours une trajectoire de 
type Bezier pour definir precisement un mouvement. Elle permet egalement de gerer des 
effets de transition de couleur sur des objets. 
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Dans cette section, nous allons etudier le fonctionnement d'une carte geographique interactive 
en combinant, au sein de memes transitions, V animation de plusieurs proprietes, de trajectoires 
definies avec une courbe de Bezier et l'enchainement de ces transitions (voir Figure 2.5). 



Figure 2.5 

Apercu 

de I'exercice. 



■ is 



Exemples > ch2_interpolationEtlnteractiviteAvecClassesTweenEtTweenMax_2.fla 



Le document que nous utilisons presente la structure suivante : dans la scene, au-dessus du 
caique f ond_mc, figure d'abord la carte du monde en partie masquee de sorte qu'en l'agran- 
dissant, elle ne deborde pas sur le pied de page du document. Au-dessus, clairement iden- 
tifies et repartis vers les caiques, se trouvent les boutons plus et moins affectes a la 
manipulation des proprietes et leurs legendes respectives (voir Figure 2.6). 



Figure 2.6 
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Dans le caique actions, nous pouvons lire le code suivant : 

// initialisation 

import gs.*; 
import gs. easing.*; 
import gs. events.*; 

restaurer_btn . visible=f alse; 

var tweenMonde :TweenMax; 

// actions 

//// anim intro 

TweenMax.f rom(monde_mc, 5, {scaleX:10, scaleY:10, rotation:90, x:700, y:1200, 
»» bezier: [ {x:290, y:143}, {x:300, y:345}], delay:0.2, ease:Strong.easeInOut}) ; 

//// actions boutons 

// Abscisse x 

plusX_btn . addEventListener (MouseEvent .CLICK, plusl ) ; 
function plusl (evt:MouseEvent) { 

TweenMax.to(monde_mc, 2, {x:monde_mc.x-100, delay:0, ease:Strong.easeOut}) ; 

restaurer_btn . visible=true; 

} 

moinsX_btn.addEventListener(MouseEvent. CLICK, moinsl ) ; 
function moinsl (evt:MouseEvent) { 

TweenMax.to(monde_mc, 2, {x:monde_mc.x+100, delay:0, ease:Strong.easeOut}) ; 

restaurer_btn . visible=true; 

} 

// Ordonnee y 

plusY_btn . addEventListener (MouseEvent .CLICK, plus2) ; 
function plus2 (evt:MouseEvent) { 

TweenMax.to(monde_mc, 2, {y:monde_mc.y-100, delay:0, ease:Strong.easeOut}) ; 

restaurer_btn . visible=true; 

} 

moinsY_btn . addEventListener (MouseEvent . CLICK, moins2) ; 
function moins2 (evt:MouseEvent) { 

TweenMax.to(monde_mc, 2, {y:monde_mc.y+100, delay:0, ease:Strong.easeOut}) ; 

restaurer_btn . visible=true; 

} 

// Rotation 

plusRotation_btn. addEventListener (MouseEvent .CLICK, plus3) ; 
function plus3 (evt: MouseEvent) { 

TweenMax.to(monde_mc, 2, {rotation : mondejnc. rotation-1 5, delay :0, 

ease:Strong.easeOut}) ; 

restaurer_btn . visible=true ; 

} 

moinsRotation_btn . addEventListener (MouseEvent . CLICK, moins3 ) ; 
function moins3 (evt: MouseEvent) { 

TweenMax. to (mondejnc, 2, { rotation : mondejnc. rotation+1 5, delay :0, 

ease:Strong.easeOut}) ; 

restaurer_btn . visible=true ; 

} 

// Alpha 

plusAlpha_btn.addEventListener(MouseEvent .CLICK, plus4) ; 
function plus4 (evt: MouseEvent) { 
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if (monde_mc.alpha<1 ) { 

TweenMax. to (monde_mc, 1, { alpha: mondejnc. alpha+0.1 , delay:0, ease : Strong. easeOut} ) ; 
restaurer_btn . visible=true ; 

} 

} 

moinsAlpha_btn . addEventListener (MouseEvent . CLICK, moins4) ; 
function moins4 (evt: MouseEvent) { 
if (monde_mc.alpha>0) { 

TweenMax. to (monde_mc, 1, { alpha: mondejnc. alpha-0.1 , delay:0, ease : Strong. easeOut} ) ; 
restau rer_btn . visible=t rue ; 

} 

} 

// Echelle 

plusEchelle_btn . addEventListener (MouseEvent . CLICK, plus5) ; 
function plus5 (evt: MouseEvent) { 

TweenMax. to (mondejnc, 2, {scaleX:monde_mc.scaleX+0.5, scaleY:monde_mc.scaleY+0.5, 

delay:0, ease:Strong. easeOut}) ; 

restaurer_btn . visible=true ; 

} 

moinsEchelle_btn . addEventListener (MouseEvent .CLICK, moins5) ; 
function moins5 (evt: MouseEvent) { 

TweenMax. to (mondejnc, 2, {scaleX: mondejnc. scaleX-0. 5, scaleY:monde_mc.scaleY-0.5, 

delay :0, ease : Strong. easeOut} ) ; 

restaurer_btn . visible=true ; 

} 

// Restaurer 

restaurer_btn.addEventListener(MouseEvent .CLICK, restaurerCarte) ; 
function restaurerCarte (evt:MouseEvent) { 

tweenMonde= TweenMax. to (mondejnc, 5, {scaleX:1, scaleY:1, x:400, y:270, rotations, 

alpha:1, delay:0, ease:Strong.easeInOut}) ; 

tweenMonde.addEventListener(TweenEvent. COMPLETE, tweenFinil ) ; 

} 

function tweenFinil (evt:TweenEvent) { 
restaurer_btn . visible=f alse ; 

} 

La classe TweenMax, a la difference de la classe native Tween, n'est pas presente dans le 
repertoire f 1 situe dans le repertoire de l'application Flash. Vous devez done avoir tele- 
charge cette classe. 

Une fois la classe telechargee et dezippee, le dossier obtenu contient un dossier nomme gs 
qui rassemble 1' ensemble des classes et sous-classes utiles pour gerer les interpolations de 
la classe TweenMax. Vous devez placer ce dossier a cote de votre document Flash, a l'interieur 
de votre projet jusqu'a la publication des richiers SWF. 

Mise a jour de la classe GreenSock TweenMax. Les classes Greensock TweenLight et TweenMax 
etant regulierement mises a jour, la structure et le nom des elements qui les composent sont sujets a 
modification. Vous adapterez naturellement nos commentaires presents tout au long de I'ouvrage en 
fonction de ces eventuelles mises a jour. Le dossier de classes gs que nous utilisons dans cet ouvrage 
etant appose aux exemples du livre, vous disposez deja d'une structure valide pour I'ensemble des 
fichiers et ne necessitez pas de la telecharger a nouveau, y compris pour tout developpement d'inter- 
polation de type TweenMax que vous seriez amene a produire vous-meme par la suite. 
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Que faire des classes apres compilation des SWF ? 

Le code contenu dans les classes appelees avec la commande import en ActionScript, a I'interieur 
de votre document, sera compile directement dans le SWF II n'est done pas necessaire de placer les 
classes sur le serveur qui heberge votre site avec les fichiers SWF Neanmoins, il est souhaitable de les 
conserver pres de votre document source Flash (.f la) afin de permettre les eventuelles mises a jour 
et la recompilation de vos animations au format SWF 

Centraliser les classes ajoutees avec les chemins de classe (classPath) 

II est possible de centraliser les classes que vous utilisez dans un autre repertoire et de s'y referer pour 
chaque nouveau document pour lequel vous souhaitez les utiliser, ponctuellement pour le document 
ouvert ou definitivement pour I'ensemble des nouveaux documents Flash. La premiere methode 
consiste a definir un chemin d'acces automatique pour les classes natives (classPath), chemin invoque 
a la publication du document actif en redefinissant ses parametres de publication. La seconde 
methode consiste a redefinir ce meme chemin de classes natives, directement dans les preferences 
de I'application Flash, de sorte que chaque nouveau document dispose des nouvelles classes. 

Dans les deux cas, il devient alors possible d'appeler la classe ajoutee uniquement par son nom, et sans 
la recopier physiquement dans votre projet, comme nous le faisons deja avec la classe Tween native. 

Pour importer une classe pour le document actif uniquement, il faut redefinir les parametres de publica- 
tion du document ouvert. Faites Fichier > Parametres de publication (ou depuis I'lnspecteur de proprietes, 
cliquez sur le bouton du haut intitule Modifer). Au sommet de la boite de dialogue, dans I'onglet Flash, 
a droite de la liste de version du langage ActionScript, cliquez sur le bouton Parametres. Dans la nouvelle 
boite de dialogue, en bas, ajoutez un chemin en cliquant sur le bouton plus. Puis, selectionnez la classe 
a ajouter en cliquant sur le bouton de selection materialise par un petit dossier, a droite du bouton 
moins. Confirmez I'importation et validez toutes les fenetres. La classe est integree au document. 

Pour importer une classe pour I'ensemble des nouveaux documents, vous devrez redefinir les prefe- 
rences de Flash. Dans les preferences de I'application (Fichier > Preferences), cliquez d'abord sur la 
categorie ActionScript, puis sur le bouton Parametres d ActionScript 3.0, situe en bas de la fenetre. 
Dans la boite de dialogue qui apparait, dans la deuxieme liste d'affichage nommee Dossiers, conte- 
nant des fichiers de classes ActionScript, cliquez sur le bouton de selection de repertoire pour selec- 
tionner le repertoire de classes et I'integrer desormais a vos futurs documents. 

■■^■■■■■■■■■lill^^^H 

A cote du dossier gs que vous avez telecharge, figurent des documents au format SWF, res- 
pectivement nommes PluginExplorer . swf et TweenLiteBasics . swf . Ces fichiers vous 
assisteront sur l'edition des lignes de code pour generer une interpolation de type TweenMax. 
Ces assistants sont tres utiles, notamment pour le calcul d'une trajectoire de mouvement de 
type Bezier que nous utilisons pour deplacer des objets (voir Figure 2.7). 

[.'assistant TweenMax. Pour utiliser I'assistant TweenMax, ouvrez, avec le lecteur Flash installe sur 
votre systeme, le fichier nomme PluginExplorer. swf . Puis, cliquez sur le bouton Example situe 
pres du type d'interpolation de votre choix. Une nouvelle fenetre apparait et affiche les lignes de code 
relatives a la propriete choisie. Vous pouvez alors modifier les reglages dans la partie droite de la fene- 
tre pour ajuster le script ou deplacer directement les options de controle dans la zone d'apercu situee 
a gauche de la fenetre (voir Figure 2.8). Pour controler une courbe de Bezier, par exemple, cliquez 
successivement sur le trace qui figure dans I'apercu a gauche, puis deplacez les points crees afin 
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d'ajuster instantanement le trace. A droite, activez eventuellement I'option Tween through bezier 
points pour que le trace passe par les points crees au lieu d'y etre simplement aimante. Cliquez 
ensuite sur le bouton TWEEN pour lancer un apercu de I'animation obtenue. Appuyez sur Reset pour 
reinitialiser les parametres. 



Figure 2.7 

Apercu de 

I'assistant 

TweenMax. 




Figure 2.8 

Detail de la 
configuration 
d'une propriete. 
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Pour recuperer le code genere par I'application, dans la zone de code situee en bas de la fenetre, 
copiez-le directement en appuyant sur Cmd+A, puis Cmd+C (Mac) ou Ctrl+A, puis Ctrl+C (Windows). 
Puis collez le code directement dans la fenetre Actions de votre document Flash en faisant Cmd+V 
(Mac) ou Ctrl+V (Windows). 
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Dans le code, nous demarrons avec l'importation des classes requises. 

// initialisation 

import gs.*; 
import gs. easing.*; 
import gs. events.*; 

Les classes importees sont respectivement celles contenues dans le repertoire gs pour les 
interpolations, dans le repertoire easing pour permettre les effets de transition et d'accele- 
ration, et dans le repertoire events pour autoriser l'enchainement d'animations ou l'execution 
de fonctions apres les animations (evenements). 

Puis, nous masquons le bouton restaurer_btn qui sert a restaurer la position initiale de la carte, 
car elle n'est pas encore modifiee. C'est uniquement, lors d'une modification, que nous rendons 
ce bouton visible afin de permettre la reinitialisation de la carte a ses parametres d'origine : 

restaurer_btn . visible=f alse; 

Les occurrences d'animation issues de la classe TweenMax ne requierent pas d'etre typees. 
Mais nous declarons neanmoins ici une nouvelle occurrence d'animation afin de permettre 
d'y attacher, plus loin dans le code, un ecouteur. Cela va permettre d'executer d'autres fonc- 
tions lorsque celle-ci sera terminee et introduire, si vous le souhaitez, d'autres interpolations, 
comme nous l'avons vu avec la classe Tween native dans la section precedente : 

var tweenMonde : TweenMax; 

Puis, viennent les actions : 

// actions 

//// anim intro 

TweenMax. f rom(monde_mc, 5, {scaleX:10, scaleY:10, rotation:90, x:700, y:1200, 
|» bezier: [ {x:290, y:143}, {x:300, y:345}], delay:0.2, ease:Strong.easeInOut}) ; 

D'abord, nous creons une premiere interpolation TweenMax. Celle-ci interpole les proprietes 
de l'objet monde_mc a partir des valeurs indiquees en parametre, vers les valeurs courantes 
de l'objet sur la scene (grace a l'instruction from). L' animation dure 5 secondes (5) et 
demarre un cinquieme de seconde apres l'execution du Flash (delay : 0 . 2). Sa transition est 
de type progressive (Strong) et la progression est marquee a la fois en entree et en sortie 
(easelnOut). Les proprietes animees sont respectivement l'echelle (scaleX et scaleY), la 
rotation (rotation) et la position (x et y). Cette animation enfin suit une trajectoire de type 
Bezier materialisee par deux points d'ancrage dont les coordonnees sont stockees dans un 
tableau (bezier: [{x: 290, y:143}, {x:300, y:345}]). 



Definir les coordonnees d'une courbe de Bezier pour la classe TweenMax. Pour utiliser le 
parametre bezier dans une transition TweenMax, vous devez connaitre au prealable les coordon- 
nees des points d'inflexion de la courbe (sauf a utiliser I'assistant TweenMax presente plus haut). Pour 
connaitre les coordonnees des points d'inflexion, utilisez les reperes de composition de votre docu- 
ment Flash. Dans le menu principal de Flash, choisissez Affichage > Regies. Puis, glisser-deposez des 
reperes depuis la regie situee a gauche, vers un point d'inflexion, pour en connaitre I'abscisse x. De 
meme, glisser-deposez un guide de la regie du haut, vers un point d'inflexion, pour en connaitre 
I'ordonnee y. 



Interpolations et interactivite avec les classes Tween et TweenMax 



45 



Viennent ensuite les actions relatives a chaque bouton plus et moins, pour chaque propriete : 
//// actions boutons 
// Abscisse x 

plusX_btn . addEventListener (MouseEvent .CLICK, plusl ) ; 
function plusl (evt:MouseEvent) { 

TweenMax. to (monde_mc, 2, {x:monde_mc.x-100, delay:0, ease:Strong.easeOut}) ; 

restaurer_btn . visible=true; 

} 

Par exemple, le premier bouton, qui permet de modifier la position de la carte en x, attache 
sur l'objet bouton plusX_btn un ecouteur. Cet ecouteur associe a un evenement souris de 
type clic une fonction nommee plusl . 

Dans cette fonction, une autre interpolation non identifiee et non typee apparait et permet de 
modifier la propriete x de l'objet monde_mc en incrementant sa position courante avec 
monde_mc.x, d'une valeur negative de 100 pixels. A chaque clic sur le bouton, la carte est 
done deplacee de 100 pixels en animation vers la gauche. Cette animation contient, en 
outre, une acceleration definie par le parametre ease. 

Definition d'une interpolation TweenMax 

La structure d'une interpolation TweenMax est la suivante : 

■ TweenMax. direction (symbole, duree, {propriete, propriete, propriete..., delay, ease}) 

■ TweenMax. Rappelle le nom de la classe importee pour generer une interpolation. 

■ Direction. Indique si I'interpolation doit utiliser les parametres qui suivent pour demarrer I'ani- 
mation et terminer sur les proprietes courantes de l'objet dans la scene (dans ce cas, nous inscri- 
vons from), ou partir de la position courante de l'objet dans la scene et terminer I'interpolation 
sur les valeurs passees en parametre (dans ce cas nous ecrivons le terme to). 

■ Symbole. Indique le nom de l'objet a animer. Par exemple mondejne. 

■ Duree. Indique la duree de I'animation en secondes. Pour une duree plus courte, utilisez des 
valeurs decimales. La valeur 0.5 mentionne une demie seconde. 

■ Propriete. Entre les deux accolades, vous pouvez ajouter autant de proprietes que vous le sou- 
haitez. Leur ordre n'a pas d'incidence. Chaque propriete doit etre separee par une virgule. Notez 
que certaines proprietes adoptent une syntaxe particuliere comme le trace Bezier qui place une 
serie de valeur dans une structure tabulaire composee de crochets et oil chaque paire de valeurs 
placee entre accolades est separee a nouveau par une virgule. 

■ Delay. Permet d'indiquer un temps avant d'executer I'animation. Par exemple, une valeur de 2 
retarde le lancement de I'interpolation de deux secondes. L'ordre d'apparition du delai par rapport 
aux autres proprietes n'a pas d'incidence. 

■ Ease. Definit le type de transition comme vu dans la section consacree a la classe Tween. L'ordre 
d'apparition du parametre ease par rapport aux autres proprietes n'a pas d'incidence. 




Ce principe est egalement applique, sur chaque bouton disponible dans la scene, pour les 
proprietes y et rotation. Nous obtenons : 

// Abscisse x 

plusX_btn . addEventListener (MouseEvent .CLICK, plusl ) ; 
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function plusl (evt:MouseEvent) { 

TweenMax.to(monde_mc, 2, {x:monde_mc.x-100, delay:0, ease:Strong.easeOut}) ; 
restaurer_btn . visible=true; 

} 

moinsX_bt n.addE vent Listener (MouseEvent. CLICK, moinsl ) ; 
function moinsl (evt :MouseEvent) { 

TweenMax.to(monde_mc, 2, {x:monde_mc.x+100, delay :0, ease:Strong.easeOut}) ; 

restaurer_btn . visible=true ; 

} 

// Ordonnee y 

plusY_btn. addEvent Listener (MouseEvent .CLICK, plus2) ; 
function plus2 (evt:MouseEvent) { 

TweenMax.to(monde_mc, 2, {y:monde_mc.y-100, delay :0, ease:Strong.easeOut}) ; 

restaurer_btn . visible=true ; 

} 

moinsY_btn .addEvent Listener (MouseEvent .CLICK, moins2) ; 
function moins2 (evt :MouseEvent) { 

TweenMax.to(monde_mc, 2, {y:monde_mc.y+100, delay :0, ease:Strong.easeOut}) ; 

restaurer_btn . visible=true ; 

} 

// Rotation 

plusRotation_btn. addEvent Listener (MouseEvent .CLICK, plus3) ; 
function plus3 (evt:MouseEvent) { 

TweenMax.to(monde_mc, 2, {rotation:monde_mc.rotation-15, delay:0, 
ease:Strong.easeOut}) ; 

restaurer_btn . visible=t rue ; 

} 

moinsRotation_bt n.addE vent Listener (MouseEvent .CLICK, moins3) ; 
function moins3 (evt :MouseEvent) { 

TweenMax.to(monde_mc, 2, {rotation:monde_mc.rotation+l5, delay:0, 
ease:Strong.easeOut}) ; 

restaurer_btn . visible=true ; 

} 

Les proprietes alpha, scaleX et scaleY sont gerees un peu differemment : 
// Alpha 

plusAlpha_btn . addEvent Listener (MouseEvent .CLICK, plus4) ; 
function plus4 (evt:MouseEvent) { 
if (mondemc . alpha<1 ) { 

TweenMax.to(monde_mc, 1, {alpha : monde_mc. alpha+0. 1 , delay :0, 

»» ease:Strong.easeOut}) ; 

restaurer_btn . visible=true; 

} 

} 

moinsAlpha_btn . addEvent Listener (MouseEvent .CLICK, moins4) ; 
function moins4 (evt:MouseEvent) { 
if (mondemc . alpha>0) { 

TweenMax.to(monde_mc, 1, {alpha:monde_mc.alpha-0.1 , delay:0, 

»» ease:Strong.easeOut}) ; 

restaurer_btn . visible=true; 

} 

} 

// Echelle 

plusEchelle_btn . addEvent Listener (MouseEvent . CLICK, plus5) ; 

function plus5 (evt:MouseEvent) { 

TweenMax.to(monde_mc, 2, {scaleX:monde_mc.scaleX+0.5, 

-> scaleY :monde_mc.scaleY+0. 5, delay:0, ease:Strong.easeOut}) ; 
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restaurer_btn . visible=true; 

} 

moinsEchelle_btn . addEvent List ener (MouseE vent .CLICK, moins5) ; 

function moins5 (evt:MouseEvent) { 

TweenMax. to (monde_mc, 2, {scaleX:monde_mc.scaleX-0.5, 

- scaleY:monde_mc.scaleY-0.5, delay:0, ease:Strong.easeOut}) ; 

restaurer_btn . visible=true; 

} 

La gestion de l'alpha est astreinte a ses limites qui sont 0 et 1 afin d'eviter que l'utilisateur 
n'incremente trop la valeur dans un sens ou dans 1' autre, au-dela de ces limites. Cela evite, 
lorsqu'il active le bouton oppose, qu'il ne percoive l'inversion de l'effet avec un retard du 
au rythme impose du pas d' incrementation. 

La gestion de l'echelle adopte quant a elle une interpolation oil les proprietes scaleX et 
scaleY sont associees et animees simultanement - ce que ne nous permettait pas la classe 
Tween native, du moins en une seule ligne de code. 

Pour terminer, enfin, un bouton de restauration (restaurer_btn) initialise tous les parametres 
en reprenant les valeurs courantes de l'objet sur la scene, a travers une nouvelle interpolation : 

// Restaurer 

restaurer_btn . addEvent Listener (MouseEvent .CLICK, restaurerCarte) ; 
function restaurerCarte (evt:MouseEvent) { 

tweenMonde= TweenMax. to(monde_mc, 5, {scaleX:1, scaleY:1, x:400, y:270, 
rotation : 1 , alpha:1, delay:0, ease:Strong.easeInOut}) ; 

tweenMonde . add Event List ener (Tween Event . COMPLETE , tweenFinil ) ; 

} 

function tweenFinil (evt:TweenEvent) { 
restaurer_btn . visible=f alse ; 

} 

Cette interpolation, a la difference des autres, utilise le nom d'occurrence que nous avons 
typee dans 1' initialisation au debut du code. Cela permet de reutiliser cet identifiant pour y 
attacher, a la suite, un ecouteur et lancer l'execution d'une nouvelle fonction une fois l'ani- 
mation terminee. En 1'occurrence, la fonction invoquee a Tissue de 1' interpolation tween- 
Monde restaure la visibilite du bouton. 



Enchainer des actions a une interpolation TweenMax 

Pour ajouter des actions suite a une interpolation TweenMax, il est possible d'invoquer une autre 
fonction via un gestionnaire d'evenements, comme dans cet exemple : 

tweenMonde. addEventListener(TweenEvent. COMPLETE, tweenFinil ) ; 
Vous pouvez aussi invoquer directement une fonction, en parametre de 1'interpolation, comme suit : 

tweenMonde= TweenMax. to (monde_mc, 5, {scaleXM, scaleY:1, 
x:400, y:270, rotations, alpha:1, delay:0, ease: Strong. easelnOut, 

onStartListenerifonctionDemarrage, onCompleteListener:f onctionFin }) ; 

Le parametre onStartListener appelle une nouvelle fonction au demarrage de I'interpolation. Le 
parametre onCompleteListener appelle une fonction une fois I'interpolation achevee. 
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A retenir 

■ La classe TweenMax est plus puissante que la classe Tween native car elle permet d'integrer plusieurs ani- 
mations de propriete dans une meme instruction et rend ainsi le document plus stable a I'execution. 

■ II est possible, avec TweenMax, d'enchainer plusieurs animations en y associant la classe Tween- 
Event, suivie de I'evenement M0TI0N_FINISH ou en passant le nom de la fonction directement en 
parametre de I'interpolation a I'aide de la propriete onStartListener ou onCompleteListener. 

■ Les interpolations de la classe TweenMax permettent d'animer les proprietes d'objets, mais aussi d'utiliser 
des trajectoires de type Bezier et de determiner un delai pour retarder I'execution de I'animation. 

■ II est possible de definir une transition depuis la position courante vers une nouvelle position ou 
inversement, en utilisant to ou from en amorce de la creation d'une interpolation TweenMax. 

■ Un assistant est disponible avec la classe TweenMax. II permet de s'affranchir de la saisie du code 
pour realiser des interpolations plus complexes et explorer d'autres proprietes. 



Defilant TweenMax avec un pointeur et un masque 

Les classes TweenMax contribuent largement a ameliorer l'ergonomie d'un projet en lui 
offrant des solutions graphiques efficaces pour accompagner le deploiement des contenus 
dans l'interface d'un site. Elles facilitent l'organisation spatiale des donnees en offrant la 
possibilite de scenariser leur mise en forme et servir des fonctionnalites applicatives. Une 
des applications les plus courantes en ce sens est le controle de l'affichage d'un contenu a 
hauteur variable par une barre d'ascenseur personnalisee. 

Dans cette section, nous abordons l'utilisation des classes TweenMax dans le contexte 
du deploiement d'une barre d'ascenseur personnalisee et adaptable a tout type de 
contenu. Un ascenseur permet ici de faire defiler un texte avec un gestionnaire de type 
Event . ENTER_FRAME, mais des boutons plus et moins disposes de part et d' autre de la barre 
d'ascenseur controlent le repositionnement de celui-ci a I'aide des classes TweenMax. Dans 
cet exemple, nous abordons aussi le deplacement de la barre qui sert a temporiser le defilement 
du texte, avec la methode startDrag (voir Figure 2.10). 

Le document que nous utilisons presente la structure suivante : dans la scene principale du 
document, nous distinguons, au-dessus du caique f ond_mc, un symbole ascenseur_mc et 
un texte masque (voir Figure 2.11). Le symbole ascenseur_mc est compose de plusieurs 
autres symboles de type MovieClip. Deux symboles : plus_btn et moins_btn, permettent 
de deplacer le texte verticalement par a-coups successifs dans un sens ou dans l'autre. Un 
symbole barre_btn permet de le positionner directement a l'endroit souhaite en deplacant 
simplement cet objet verticalement. Chacun des symboles utilises pour le controle du defi- 
lement du texte contient, a son tour, en plus de la forme graphique qui le caracterise, un 
symbole de type MovieClip rectangulaire et transparent, plus large que la forme graphique 
visible rectangle_mc. Cette astuce permet d'etendre les fonctionnalites du symbole au- 
dela de la surface visible, ce qui est particulierement interessant dans ce contexte ou les ele- 
ments graphiques demeurent tres etroits et ou 1' interaction avec 1' objet est la base de l'acces 
au contenu que nous affichons. Dans chacun des symboles, nous pouvons enfin relever la 
position de leurs centres respectifs, determinante pour le calcul du positionnement des 
objets avec la barre de defilement (voir Figure 2.12). 
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Figure 2.10 
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Exemples > ch2_interpolationEtlnteractiviteAvecClassesTweenEtTweenMax_3.fla 

Dans le caique actions, nous pouvons lire le code suivant : 

// initialisation 

import gs.*; 
import gs. easing.*; 
import gs. events.*; 

var positionlnitialTexteY: Number=texte_txt .y ; 
var hauteurScroll : Number=ascenseur_mc . f iletMCjnc .height ; 
var hauteurBarre: Number=ascenseur_mc . barre_btn . height ; 
var pas:Number=40; 

// actions 

//// calcul de la position du texte 

stage . addEventListenerf unction placerTexte (evt:Event) { 

texte_txt . y= ( (ascenseur_mc . barre_btn . y*-1 ) * (texte_txt . height / 
(hauteurScroll-hauteurBarre) )+positionInitialTexteY) ; 

} 

//// actions boutons 

// + 

ascenseur_mc . plus_btn . addEvent List ener(MouseE vent . M0USE_D0WN , scrollPlus ) ; 
function scrollPlus (evt :MouseEvent) { 
addEvent Listener (Event . ENTER_FRAME, placerTexte) ; 
if (ascenseur_mc.barre_btn.y>=pas) { 

TweenMax . to (ascenseur_mc . barre_btn , 1 , {y : ascenseurjnc . barre_btn . y-pas , 
ease:Strong.easeOut}) ; 
} else { 

TweenMax. to(ascenseur_mc.barre_btn, 1, {y:0, ease : Strong . easeOut} ) ; 

} 
} 

// - 

ascenseur_mc .moins_btn . addEvent Listener (MouseEvent . MOUSE_DOWN, scrollMoins) ; 
function scrollMoins (evt :MouseEvent) { 
addEvent Listener (Event . ENTER_FRAME, placerTexte) ; 

if (ascenseur_mc.barre_btn.y<hauteurScroll-hauteurBarre-pas) { 

TweenMax . to (ascenseurjnc . barre_btn , 1 , {y : ascenseurjnc . barrejatn . y+pas , 
* ease:Strong.easeOut}) ; 
} else { 

TweenMax. to (ascenseurjnc . barrejjtn, 1 , {y: hauteurScroll-hauteurBarre , 
ease:Strong.easeOut}) ; 

} 

} 

// scroll 

var zoneDeDeplacement: Rectangle = new Rectangle(0, 0,0, hauteurScroll-hauteurBarre) ; 

ascenseurjnc . barre_btn . addEventListener (MouseEvent . MOUSE_DOWN , activer-Deplacement ) ; 
function activerDeplacement (evt : MouseEvent) { 

addEventListener ( Event . ENTERj^RAME , placerTexte ) ; 

evt . currentTarget . startDrag (false , zoneDeDeplacement ) ; 

} 
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addEventListener(MouseEvent.MOUSE_UP, stopperDeplacement) ; 
function stopperDeplacement (evt :MouseE vent ) { 
evt .currentTarget . stopDrag( ) ; 

} 

Tout d'abord, nous importons les classes requises pour la gestion des interpolations Tween- 
Max : 

// initialisation 

import gs.*; 
import gs. easing.*; 
import gs. events.*; 

Puis, nous declarons certaines variables arm de stacker des valeurs et surtout, simplifier le 
programme en les centralisant ici : 

var positionlnitialTexteY: Number=texte_txt .y ; 
var hauteurScroll: Number=ascenseur_mc .f iletMCjnc .height ; 
var hauteurBarre : Number=ascenseur_mc . barre_btn . height ; 
var pas : Number=40; 

La premiere variable positionlnitailTexteYrecupere la position courante en y de l'objet 
texte amene a defiler. Nous obtenons une valeur de 30. En realite, il s'agit ici de stacker en 
memoire le decalage obtenu entre le haut du document et la position limite superieure que 
le texte doit atteindre. Nous utilisons cette valeur plus loin pour recaler le positionnement 
du texte dont la position se determine selon la barre de defilement qui demarre, elle, 
a 0 pixel. 

La deuxieme variable hauteurScroll enregistre la hauteur effective du filet contenu dans 
1' ascenseur. Nous ne prenons que la hauteur du filet, car celle de l'ascenseur est faussee. L ascen- 
seur est effectivement plus haut qu'il n'y parait a cause de la presence occulte des symboles 
rectangles masques, qui debordent de part et d'autre a l'interieur des boutons plus et moins. 

La troisieme variable hauteurBarre enregistre la hauteur de l'objet barre_mc qui figure 
dans l'ascenseur. 

Enfin, la derniere variable, pas, determine un pas d' incrementation utilise dans les animations 
TweenMax, gerees par les boutons plus et moins. 

Pour la plupart des variables, nous avons choisi de definir des valeurs par rapport a des 
expressions plutat que par des chiffres, car cela rend le developpement naturellement plus 
adaptable a tout type de configuration. Vous pouvez ainsi recuperer le document et redessi- 
ner les formes des boutons ou de la barre, et modifier la hauteur du texte ou le remplacer par 
un autre objet, le dispositif continuera de fonctionner. 

Ensuite, apparaissent les actions : 

// actions 

//// calcul de la position du texte 

function placerTexte (evt: Event) { 

texte_txt .y=( (ascenseurjnc . barre_btn . y*-1 ) * (texte_txt . height/ 
«» (hauteurScroll-hauteurBarre) )+positionInitialTexteY) ; 

} 
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Dans les actions, nous commencons par creer la fonction qui sera appelee par chacun des 
boutons plus ou moins, lorsque l'utilisateur cliquera dessus, et uniquement a ce moment-la. 

Dans cette fonction, nous determinons la position de l'objet texte_txt en y. Par soucis 
d'ergonomie, nous devons faire descendre le texte lorsque le curseur barre_mc monte et 
inversement. Pour cela, nous devons au prealable considerer que seule la zone utile de 
l'ascenseur doit etre prise en compte dans le calcul, c'est-a-dire la zone situee entre l'extre- 
mite du symbole barre_mc en mouvement et l'extremite de la zone de deplacement mate- 
rialisee par le filet (voir Figures 2.13 et 2.14). 

Nous indiquons done que la position y du texte (texte_txt . y) est l'inverse (multipliee par 
-1) de la position courante de la barre de defilement (ascenseur_mc . barre_mc . y). Mais, 
comme le texte est bien plus grand que ne Test la zone de defilement, nous devons ajouter 
un coefficient pour demultiplier la position courante de la barre de deplacement par une 
valeur qui rende la hauteur de la zone de defilement de l'ascenseur proportionnelle a la hau- 
teur du texte lui-meme. Nous multiplions done la position inversee de la barre par : la hauteur 
du texte, divisee par la difference entre la hauteur de la zone de defilement et celle de la 
barre elle-meme (texte_txt . height/ (hauteurScroll-hauteurBarre). 

Pour eviter enfin que le defilement ne replace le texte a 0 lorsque la barre est situee tout en 
bas, nous ajoutons en plus la valeur positionlnitialTexteY, stockee initialement, qui 
determine le decalage entre le sommet et la position courante du bloc de texte. 

Formulee de maniere generique, nous ob tenons 1' equation suivante : 

posit ionObj etY=positionBarreAscenseurY*Coef f icien In verse* 
coefficient ProprotionHauteurTexte/ 
(HauteurZoneVisiblePlusHauteurBarreDef ilement) 



Figure 2.13 

Positionnement 
du texte lorsque 
la barre d'ascen- 
seur est en haut. 




Figure 2.14 

Positionnement 
du texte lorsque 
la barre d'ascen- 
seur est en bas. 
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Gerer un ascenseur avec une acceleration. Dans le cadre du developpement de la barre de 
defilement, comme vu Chapitre 1 , vous pouvez aussi definir un deplacement du contenu avec un 
coefficient d'acceleration au lieu de le deplacer en temps reel par rapport a la position du curseur 
Pour cela, vous devez incremented a la position courante de I'objet a rendre mobile (ici, texte_txt), 
la valeur obtenue par notre calcul (expression actuellement utilisee) moins la position courante du 
contenu (texte_txt.y) ; le tout, divise par une valeur comprise entre 1 et 10 grand maximum. 
Reste alors a jauger le coefficient de repositionnement de I'objet texte_txt de sorte qu'il ne parte 
pas dans le decor lorsque le curseur barrejnc atteint les extremites de la zone de defilement. 



Ensuite, apparait Taction du bouton plus_btn : 

//// actions boutons 

// + 

ascenseur_mc . plus_btn . addEvent List ener(MouseE vent . M0USE_D0WN , scrollPlus ) ; 
function scrollPlus (evt :MouseEvent) { 
if (ascenseur_mc.barre_btn.y>=pas) { 

TweenMax . to (ascenseur_mc . barre_btn , 1 , {y : ascenseurjnc . barre_btn . y-pas , 
ease:Strong.easeOut}) ; 
} else { 

TweenMax. to(ascenseur_mc.barre_btn, 1, {y:0, ease : Strong . easeOut} ) ; 

} 

> 

Lorsque l'utilisateur presse le bouton de la souris sur I'objet plus_btn, la fonction scroll- 
Plus s'execute. Dans cette fonction, nous creons deux interpolations TweenMax. La pre- 
miere qui incremente la position de la barre d'un pas de 40 pixels est lancee si et seulement 
si cette barre d' ascenseur atteint une position superieure ou egale a 40 pixels. Au-dessous, si 
nous continuions d'incrementer sa position de 40 pixels, la barre depasserait la limite de 
1' ascenseur definie par le sommet du filet. 

Lorsque la barre se trouve a une distance inferieure a un pas d' incrementation, en revanche, 
nous creons une animation TweenMax qui replace directement la barre a la position 0 qui 
correspond au sommet du filet avec else. 

Pour le bouton moins_btn, nous declinons les valeurs en les inversant et nous obtenons le 
code suivant : 

// - 

ascenseurjnc .moins_btn . addEvent Listener (MouseEvent . M0USE_D0WN, scrollMoins) ; 
function scrollMoins (evt :MouseEvent) { 

if (ascenseur_mc.barre_btn.y<hauteurScroll-hauteurBarre-pas) { 

TweenMax . to (ascenseurjnc . bar re Jot n , 1 , {y : ascenseurjnc . bar re Jot n . y+pas , 
ease:Strong.easeOut}) ; 
} else { 

TweenMax. to (ascenseurjnc . barrejjtn, 1 , {y:hauteurScroll-hauteurBarre, 

»» ease:Strong.easeOut}) ; 

} 

} 

Le bouton moin_btn adopte le meme calcul que pour le bouton plusjbtn, a la difference 
que le point limite de repere est defini par la hauteur de 1' ascenseur moins la hauteur de la 
barre, moins le pas d' incrementation. Cela correspond, compte tenu de la hauteur effective 
de la barre de defilement (voir Figure 2.12), a la limite inferieure du filet moins le pas 
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d' incrementation. Si cette limite est depassee, alors (avec else), l'animation TweenMax 
deplace la barre jusqu'a l'extremite inferieure du filet. 

La gestion du deplacement de la barre de defilement, enfin, se definit par le code suivant : 
// scroll 

var zoneDeDeplacement : Rectangle = new Rectangle(0,0,0,hauteurScroll-hauteurBarre) ; 

ascenseur_mc . barre_btn . addEventListener (MouseEvent .MOUSE_DOWN, 
activerDeplacement) ; 

function activerDeplacement (evt : MouseEvent) { 

addEventListener ( Event . ENTER_FRAME , placerTexte ) ; 

evt .currentTarget . startDrag (false, zoneDeDeplacement ) ; 

} 

addEventListener (MouseEvent . MOUSEJJP, stopperDeplacement) ; 
function stopperDeplacement (evt : MouseEvent ) { 
evt . currentTarget . stopDrag( ) ; 

} 

D'abord, nous definissons les limites de la zone de defilement pour le symbole barre_btn. 
Cette limite est definie a travers la creation d'une variable qui stocke les coordonnees geo- 
metriques d'un nouvel objet Rectangle. Le typage :Rectangle gere la memoire requise 
pour stacker les coordonnees. S'en suit la creation physique de l'objet avec ses coordonnees : 

var zoneDeDeplacement :Rectangle = new Rectangle(0,0,0,hauteurScroll-hauteurBarre) ; 

Une zone de deplacement se definit a travers une forme geometrique. L'equation qui permet 
de definir les coordonnees d'un rectangle en AS3 est : Rectangle (x1 , y1 , largeur, hau- 
teur). En choisissant une largeur ou une hauteur nulle, nous limitons le defilement a un axe 
vertical ou horizontal. Dans notre exemple, la hauteur correspond a celle du filet moins celle 
de la barre, car le centre de la barre est situe au sommet de cette derniere (voir Figure 2.12). 
II faut done soustraire le differentiel qui reste entre la position de son centre et sa hauteur. 

Ensuite, lorsque l'utilisateur presse le bouton de la souris sur la barre, un ecouteur execute 
la fonction zoneDeDeplacement qui active le deplacement du texte. Ce deplacement est 
amorce a la fois avec avec la fonction startDrag qui permet de rendre mobile le curseur 
barrejnc et en appelant la fonction deja identifiee (placerTexte ) , qui recalcule la position du 
texte en fonction de la position du curseur : 

ascenseur_mc . barre_btn . addEventListener (MouseEvent . MOUSE_DOWN , activerDeplacement) ; 
function activerDeplacement (evt : MouseEvent) { 

addEventListener ( Event . ENTER_FRAME , placerTexte ) ; 

evt .currentTarget .startDrag (false, zoneDeDeplacement) ; 

} 

Nous appelons, seulement maintenant, la fonction placerTexte car elle calcule de maniere 
perpetuelle la position courante du texte et de ce fait, sollicite de maniere continue les res- 
sources de l'ordinateur. Pour optimiser ces ressources, nous n'activons la fonction que 
lorsqu'elle est necessaire, et non en placant l'ecouteur a l'execution de ranimation, comme 
en l'isolant hors de la fonction par exemple. De meme, nous pourrions stopper la fonction 
lorsque le pointeur relache le curseur, mais ce faisant, nous perdrions l'effet d'amortisse- 
ment dans le mouvement du texte si l'utilisateur activait plusieurs fois de suite l'un des 
deux boutons plus ou moins, avant que l'animation ne se termine, meme avec une fonction 
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retardee suite a un evenement de type TweenEvent . COMPLETE. Nous preferons done garder 
cette fonction active. 



Arreter un ecouteur. Pour arreter un ecouteur actif, nous utilisons la methode removeEvent- 
Listener, suivie du meme gestionnaire d'evenements que celui utilise pour activer la fonction a neu- 
traliser. Ainsi, pour stopper I'ecouteur : 

addE vent List ener( Event . ENTER_FRAME , nomDeLaFonction) 
nous inscrivons : 

removeE vent Listener (Event . ENTER_FRAME, nomDeLaFonction) . 

Egalement dans notre fonction, nous activons le deplacement avec la methode startDrag ( ) . 
En parametre, nous determinons d'abord si l'objet deplace reste colle au pointeur en son 
centre (true) ou non (false). Puis, nous rappellons les coordonnees de l'objet rectangle cree 
en amont, arm de restreindre le deplacement aux limites geometriques du rectangle. 

Le programme s'acheve avec un gestionnaire associe a l'evenement MOUSE_UP pour arreter 
le deplacement du curseur barre_btn, et done, le defilement du texte, en executant la fonction 
stopperDeplacement : 

addEvent Listener (MouseEvent . MOUSEJJP, stopperDeplacement) ; 
function stopperDeplacement(evt:MouseEvent) { 
evt . currentTarget . stopDrag( ) ; 

} 

La fonction indique d'arreter le deplacement avec la methode stopDrag, lorsque la souris 
est relachee, en ciblant l'objet courant actif avec evt . currentTarget (pour en savoir plus 
sur la difference entre target et currentTarget, consultez le Chapitre 5 oil un exemple 
illustre le contexte d'utilisation de la propriete target). 

A retenir 

■ Utiliser des expressions plutot que des valeurs permet de rendre le developpement adaptable a tout 
type de mise en forme. 

■ La classe TweenMax peut etre combinee a des animations gerees avec la classe Event . ENTER_FRAME si 
les objets controles par 1'interpolation ne sont pas geres directement par la classe Event. 

■ II est possible d'etendre la zone reactive d'un objet en utilisant des symboles caches auxquels nous 
appliquons un alpha nul ou en creant un bouton pour lequel seule la zone cliquee possede une 
forme pleine. 

■ Pour gerer un deplacement d'objet, nous utilisons les methodes startDrag et stopDrag, que Ton 
associe aux limites d'une forme geometrique comme un rectangle pour contraindre le deplacement. 

■ Pour definir un deplacement rectiligne, il suffit de rendre nulle soit la largeur, soit la hauteur du rectangle 
utilise comme zone limite de deplacement. 

■ Pour calculer les rapports de valeurs entre les proprietes de differents objets, il faut bien prendre en 
compte la structure de l'objet referent (la position de son centre, sa hauteur, les elements visibles ou 
invisibles qui le composent, son decalage par rapport a la scene courante, etc). 
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Synthese 

Dans ce chapitre, vous avez appris a realiser des interpolations avec des classes extreme - 
ment puissantes. Elles offrent la possibility, en une ligne de code, de gerer de nombreuses 
proprietes, une trajectoire et un delai d'execution notamment. Vous etes a present en mesure 
d'explorer egalement d'autres classes disponibles dans l'assistant TweenMax et vous savez 
desormais les integrer par defaut a toutes vos applications, sans avoir a les ajouter manuel- 
lement dans chacun de vos nouveaux projets. 



Les transitions d'effets 
et de filtres 



Introduction 

Les transitions permettent d'ajouter aux animations des effets sur les contenus (fondus 
enchaines, Flash d'appareil photo, halo lumineux, flou directionnel, volets ou stores 
ouvrants, etc.)- Pour permettre la gestion de ces effets dans le temps, nous utilisons des clas- 
ses specifiques, qui sont transitionManager pour les effets et filters pour les filtres, et 
les associons eventuellement a un chronometre de type Timer. En typant ces transitions, il 
est en outre possible de les faire suivre d'autres effets animes et d' organiser une mise en 
scene graphique des contenus sur la duree avec des variations d'effets. 

Dans ce chapitre, nous presentons deux galeries photos qui exploitent respectivement les 
effets et les filtres en les combinant a des chronometres. 



Galerie photo avec transition d'effets 

Dans cette section, nous abordons les differents types d'effets programmables en Action- 
Script 3. Pour cela, nous appliquons dans un premier exemple un effet de fondu sur une 
galerie d'images, puis nous detaillons les proprietes des autres effets disponibles a partir de 
la classe TransitionManager. 

Effet de fondu avec un Timer 

Dans cet exemple, une galerie fait apparaitre, en fondu, une serie de photographies integrees 
physiquement dans la scene du document Flash. Vous pouvez modifier les images et leur 
nombre ainsi que la duree et le style des transitions, pour personnaliser ce script selon votre 
convenance et l'integrer a nos projets (voir Figure 3.1). 

Figure 3.1 

Apercu 
du document. 
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Exemples > ch3_transitionsEffetsEtFiltres_I .fla 



Le document que nous utilisons presente la structure suivante : dans la scene, au-dessus du 
caique f ond_mc, apparait un symbole nomme galerie_mc (voir Figure 3.2). Ce symbole 
contient une suite d'images toutes differentes. Une action stop ( ) empeche la tete de lecture 
de jouer l'animation des l'execution du document Flash (voir Figure 3.3). 



Figure 3.2 

Apercu du scenario 
de la scene 
principale. 
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Figure 3.3 

Apercu du scenario 
du symbole 
galerie_mc. 
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Sur la premiere image du caique nomme actions, figure le code suivant : 

// initialisation 

import f 1 . transitions .* ; 
import fl . transitions . easing .* ; 

var i : Number=1 ; 

var nombreDePhotos:Number=6; 

var dureeBoucle:Number=8000; 

var boucle:Timer=new Timer(dureeBoucle,nombreDePhotos) ; 

var transitionPhoto: Transit ionManager=new Transit ionManager (galerie_mc) 

galerie_mc . visible=f alse ; 

// actions 

boucle . addEvent Listener (Time rEvent .TIMER, lancerBoucle) ; 
boucle . start ( ) ; 

function lancerBoucle(evt:TimerEvent) { 
lancerGalerie ( ) ; 

} 



function 
galeri 
if (i< 
gal 
tra 
*-d 
tra 
fun 
tra 
*»d 

} 

i++; 
} else 



lancerGalerie () { 
e_mc . visible=t rue ; 
=nombreDePhotos) { 
erie_mc.gotoAndStop(i) ; 

nsitionPhoto . startTransition ({type : Fade, direction : Transition .IN, 
uration : dureeBoucle/2000 , easing : Strong . easelnOut } ) ; 
nsitionPhoto . addEventListener( "allTransitionsInDone" , suite) ; 
ction suite(evt:Event) { 

nsitionPhoto . startTransition ({type : Fade , direction : Transition .OUT, 
uration : dureeBoucle/2000 , easing : Strong . easelnOut } ) ; 



{ 
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galerie_mc . visible=f alse ; 

} 

} 

lancerGalerie() ; 

transitionPhoto.addEventListener( "allTransitionsOutDone" , suite2) ; 
function suite2(evt: Event) { 

MovieClip (evt .target . content ) . visible=f alse ; 

} 

Tout d'abord, nous importons les classes necessaires pour l'animation : 

// initialisation 

import f 1 . transitions .* ; 
import fl . transitions . easing .* ; 

Ensuite, nous definissons les variables : 

var i:Number=1 ; 

var nombreDePhotos:Number=6; 

var dureeBoucle:Number=8000; 

La variable i sert ici a definir la position de la tete de lecture sur l'image du scenario du 
symbole galerie_mc pour chaque nouvelle image a afficher. 

La variable nombreDePhotos permet de determiner le nombre de photos a jouer. Cette 
valeur correspond a priori au nombre d'images qui figurent dans le scenario du clip 
galeriejnc, mais elle peut etre inferieure. 

La variable dureeBoucle indique la duree d'une animation pour chaque photo, effets de 
transition inclus. Cette duree, comme nous le precisons plus loin, est integree dans le calcul 
de la duree de chaque effet. Ainsi, plus la duree de l'animation d'une image est longue, plus 
les transitions seront longues egalement. La duree est exprimee en millisecondes. Une 
valeur de 8 000 correspond done a un changement d'image toutes les 8 secondes. 

Ensuite, une variable boucle declare la creation d'un chronometre. Ce chronometre enclenche 
la repetition d'une action autant de fois qu'il y a d'images declarees (nombreDePhotos), 
done toutes les 8 secondes (dureeBoucle). Nous pourrions definir le chronometre selon 
l'expression suivante : Timer (duree, nombre de repetition). 

var boucle:Timer=new Timer(dureeBoucle, nombreDePhotos) ; 

Puis, nous declarons une nouvelle transition : 

var transitionPhoto:TransitionManager=new TransitionManager(galerie_mc) ; 



Calcul de la duree d'un chronometre. Lorsque vous specifiez une duree sur un Timer, comme 
suit : Timer (8000, 5), notez que la fonction appelee par I'ecouteur, attache au Timer, est activee 
dans cet exemple toutes les 8 secondes et 5 fois de suite. Les interpolations executees au sein de la 
fonction appelee, par consequent, ne doivent pas durer ici plus de 8 secondes. Elles doivent meme 
durer legerement moins que 8 secondes, environ 7 990 milli-secondes. Car le lecteur Flash requiert 
quelques milliemes de secondes pour lancer une action. En prevoyant une duree trap juste, vous 
risquez de depasser la duree prevue et de rendre I'execution de l'animation instable. 
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Le symbole galerie_mc qui contient les images est passe en parametre et c'est lui qui sera 
affecte par les effets de la classe t ransitionManager. Enfin, la galerie est masquee par defaut : 

galerie_mc . visible=f alse; 

C'est seulement lorsque la fonction lancerGalerie sera active que la galerie sera reaffichee. 
Viennent ensuite les actions : 
// actions 

boucle . addEvent Listener (Time rEvent .TIMER, lancerBoucle) ; 
boucle . start ( ) ; 

function lancerBoucle(evt:TimerEvent) { 
lancerGalerie( ) ; 

} 

D'abord, un ecouteur est attache au chronometre afin de capter les iterations et de program- 
mer une action a chacune d'entre elles. Pour cela, nous utilisons la classe Timer- 
Event . TIMER qu'il n'est pas necessaire d'importer au prealable car, comme la classe Event 
ou MouseEvent, elle est incluse nativement dans l'API du logiciel. Cet ecouteur execute 
alors une fonction nommee lancerBoucle. 

A son tour, la fonction lancerBoucle appelle une autre fonction nommee lancerGalerie. 

Pourquoi ne pas directement appeler les instructions de la fonction lancerGalerie , lors de 
la premiere fonction lancerBoucle ? Cette premiere fonction est un ecouteur de type 
chronometre et de ce fait elle ne sera executee qu'apres un certain laps de temps. Si nous 
appelions directement les instructions depuis la fonction lancerBoucle, la galerie ne serait 
lancee qu'au bout de 8 secondes. II faudrait alors attendre que les 8 premieres secondes 
soient ecoulees avant que la premiere transition ne soit executee. Pour permettre de jouer la 
galerie des l'instant 0, nous devons pouvoir executer cette fonction initialement, indepen- 
damment du chronometre. Pour cela, nous devons isoler les instructions dans une nouvelle 
fonction, autonome et distincte, qui n'attend pas de parametre d'objet, comme lancer- 
Gale rie( ). Nous pouvons alors appeler cette fonction, a la fois depuis notre chronometre 
avec la fonction lance rBoucle(evt: Time rEvent) et directement a l'initialisation de 
l'image du scenario, avec l'instruction lancerGalerie ( ). Le premier appel gere l'execu- 
tion de la galerie a partir de 8 secondes jusqu'a la fin de l'animation. Le second appel l'exe- 
cute des la publication du document. Comme la fonction est terminee avant 8 secondes, les 
deux appels s'enchainent parfaitement et 1' incrementation activee des la premiere execution 
continue de croitre avec le chronometre dans les suivantes. 

Puis, nous creons la fonction qui execute la galerie animee : 

function lancerGalerie () { 
galeriejnc . visible=true; 
if (i<=nombreDePhotos) { 

galeriejnc. gotoAndStop(i) ; 

transit ionPhoto . startTransition ({type : Fade, direction transition .IN, 
>» duration:dureeBoucle/2000, easing:Strong.easeInOut}) ; 
transitionPhoto.addEventListener( "allTransitionsInDone" , suite) ; 
function suite(evt:Event) { 

transit ionPhoto . startTransition ( {type : Fade, direction transition .OUT, 
«■» duration:dureeBoucle/2000, easing:Strong.easeInOut}) ; 

} 
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i++; 

} else { 

galerie_mc . visible=f alse ; 

} 

} 

Dans cette fonction autonome, dans un premier temps, nous rendons visible la galerie : 

galerie_mc . visible=true ; 
Puis, nous ajoutons une structure conditionnelle avec incrementation de la valeur i : 

if (i<=nombreDePhotos) { 

} 

i++ 

} else { 

galeriejnc . visible=f alse ; 

} 

Cette structure indique d'executer une action tant que la valeur de i est inferieure au nombre 
d'images derini a travers nombreDePhotos, dont nous avons determine la valeur plus haut 
a 6. Lorsque i atteint le nombre d'images, le chronometre est termine et la galerie n'appa- 
rait plus, car a cet instant, nous la rendons invisible. 

A cette structure, nous integrons les instructions pour afficher les images : 

function lancerGalerie () { 
galeriejnc . visible=true; 
if (i<=nombreDePhotos) { 

galerie_mc.gotoAndStop(i) ; 

} 

i++; 

} else { 

galerie_mc . visible=f alse; 

} 

} 

Dans un premier temps, nous specifions d'atteindre 1' image du scenario du symbole 
galeriejnc qui correspond a la valeur de i. Par defaut, sa valeur est 1. C'est done la pre- 
miere photo qui est jouee au lancement de l'animation. Cette valeur est incremented plus 
loin, en dehors du bloc d' instructions avec i++, afin de s'assurer que 1' incrementation fonc- 
tionne independamment de l'animation. Toutes les 8 secondes done, y compris des l'execution 
de la fonction avant le chronometre Timer, une nouvelle photo est affichee jusqu' a la derniere 
oil la galerie disparait completement. 

Nous specifions alors les transitions a joindre a notre fonction : 

function lancerGalerie () { 
galerie_mc . visible=true; 
if (i<=nombreDePhotos) { 

galeriejnc. gotoAndStop(i) ; 

transitionPhoto.startTransit ion ({type: Fade, direct ion: Transition. IN, 
'*?> duration:dureeBoucle/2000, easing:Strong.easeInOut}) ; 

i++; 

} else { 

galeriejnc . visible=f alse; 

} 

} 
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Nous utilisons une occurrence de la classe transitionManager typee plus haut sous le 
nom transitionPhoto. Cette transition demarre avec un fondu (type : Fade), en entree 
(direction : Transition . IN), d'une duree de 4 secondes (dureeBoucle/2000=4), et avec 
une acceleration en entree et en sortie (easing : Strong . easelnOut). 

A la suite, dans le meme bloc d'instruction, nous ajoutons une nouvelle transition qui s'execute 
une fois la premiere transition achevee, grace a un ecouteur associe a la sous-classe allTran- 
sitionsInDone (voir encadre). Cette nouvelle transition genere un effet de fondu en sortie : 

function lancerGalerie () { 
galeriejnc . visible=true; 
if (i<=nombreDePhotos) { 
galerie_mc.gotoAndStop(i) ; 

transitionPhoto . startTransition ({type : Fade, direction transition .IN, 
* duration:dureeBoucle/2000, easing:Strong.easeInOut}) ; 
transitionPhoto . addE vent Listener ( "allTransit ions I nDone" , suite) ; 
function suite(evt:Event) { 

transitionPhoto . startTransition ( {type : Fade , direction : Transition . OUT , 
*» duration:dureeBoucle/20O0, easing:Strong.easeInOut}) ; 

} 

i++; 

} else { 

galeriejnc . visible=f alse; 

} 

} 

La mise en place de la fonction est maintenant terminee. Nous pouvons l'executer au 
demarrage : 

lancerGalerie( ) ; 



Definition de la classe transitionManager 

Une transition de la classe transitionManager, appartenant a la famille de la classe transi- 
tions, peut etre lancee de deux manieres. Soit nous activons directement une interpolation 
sans la typer : 

TransitionManager. start (monClip_mc, {type : Fade, direction : Transition .IN, 
«► duration:4, easing : Strong . easelnOut} ) 

Soit nous la typons d'abord afin de permettre son identification par la suite et y associer even- 
tuellement plus tard un ecouteur, pour enchainer avec d'autres animations par exemple : 

var nomDeLaTransition: TransitionManager = new TransitionManager (galeriejnc) ; 
nomDeLaTrasition . startTransition ( {type : Fade , direction : Transition . IN , 
*» duration : 4, easing : Strong . easelnOut} ) ; 

Dans les deux cas, les parametres de la transition sont les suivants : 

{type, direction, duration, easing} 

• type designe le type d' effet a appliquer. Nous distinguons les effets suivants : Blinds, 
Fade, Fly, Iris, Rotate, Photo, PixelDissolve, Squeeze, Wipe et Zoom. 

• Blinds correspond a un effet de stores horizontaux. 

• Fade correspond a un effet de fondu. 

• Fly correspond a un effet de translation. 
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Chacun de ces effets peut etre ajuste en fonction des parametres suivants : 

• Iris correspond a un effet d'ouverture en cercle similaire a un diaphragme d'appareil 
photo. 

• Rotate effectue une rotation. 

• Photo lance un flash blanc pour simuler un appareil photo. Cet effet peut, par exemple, 
etre associe a la programmation d'un son de declenchement d'obturateur. 

• PixelDissolve joue une mosaique de formes carrees pour simuler un effet de decom- 
position de P image. 

• Squeeze ecrase Pimage. 

• Wipe joue un volet sur Pimage comme un masque qui se deplace lateralement. 

• Zoom reduit Pimage jusqu'a sa disparition. 

• direction correspond au point de depart de P effet. La valeur Transition. IN active 
Peffet en ouverture. Transition . OUT, Pactive en fermeture. 

• duration correspond a la duree de Peffet, en secondes. 

• easing, enfin, indique le mode d' acceleration a attacher a Peffet (voir Chapitre 2 sur la 
definition du parametre easing pour la classe Tween). 

Pour detecter la fin de P interpolation avec transitionManager, attachez un ecouteur sur le 
nom d'occurrence de la transition et specifiez Pevenement allTransitionlnDone si la 
transition precedemment executee est transition . IN. Specifiez a Pinverse allTransi- 
tion-OutDone si la transition precedemment executee est transition .OUT. Par exemple : 

nomDeLaTrasition.addEventListener( "allTransitionsInDone" , suite) ; 
function suite(evt : Event) :void { 

nomDeLaTrasition . startTransition ( {type : Fade , 

direction : Transition .OUT, 

duration :4, 

easing:Strong.easeInOut}) ; 

} 



Ou placer I'ecouteur et la fonction ? L'emplacement de la fonction et de son appel indiffere. 
Vous pouvez appeler une fonction avant ou apres I'avoir redigee, le lecteur executera les deux simul- 
tanement. Les designers preferent generalement placer la fonction apres I'ecouteur ou apres I'appel 
de la fonction, car cela reprend une progression logique de I'objet place dans la scene vers le pro- 
gramme. Tandis que les programmeurs puristes preferent souvent placer les fonctions avant les ecou- 
teurs, car ils pensent d'abord aux instructions avant leur mise en forme dans la scene qui bien 
souvent n'existe pas. 



Enfin, nous terminons en attachant a nouveau un ecouteur a la transition qui suit la 
deuxieme interpolation : 

transitionPhoto.addEventListener( "allTransitionsOutDone" , suite2) ; 
function suite2(evt:Event) { 

MovieClip (evt .target . content ) . visible=f alse ; 

} 
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Cette derniere fonction rend la galerie invisible une fois le fondu sortant acheve. Nous 
ciblons, pour ce faire, la transition courante, avec evt . target, en la convertissant d'abord 
en MovieClip, avec MovieClip(evt . target . content), afin de permettre de lui appliquer 
ensuite une propriete de MovieClip avec visible=f alse. 



Le transtypage. 

La methode qui consiste a convertir le typage d'un objet en un autre type d'objet se nomme le trans- 
typage. Elle est utilisee pour permettre I'affectation de certaines proprietes et methodes a des objets 
que leur type n'autorise initialement pas. Nous parlons aussi d'etendre les proprietes d'un objet, mais 
cette derniere notion est plutot reservee a la creation de sous-classes personnalisees ajoutees a des 
objets existants. 



Detecter la fin d'une boucle d iteration Tinier. Pour detecter la fin d'une boucle Timer, attachez 
au Timer un ecouteur associe a la classe Timer. Event .TIMER_COMPLETE : 

boucle . addEvent List ener( Time rEvent . TIMER_COMPLETE, boucleFinie) ; 
function boucleFinie( ) { 
trace("fin du timer") ; 

} 

Arreter un Timer. Pour arreter le deroulement d'un Timer en cours d'execution, utilisez un simple 
stop : 

boucle. stop() ; 

Pour experimenter la galerie de photos avec d'autres types de transitions, vous pouvez rem- 
placer le type defini dans chaque transition par celui de votre choix, parmi ceux definis dans 
l'encadre (Blinds, Fade, Fly, Iris, Rotate, Photo, PixelDissolve, Squeeze, Wipe, 
Zoom), et cumuler d'autres transitions a celles-ci pour les agrementer, par exemple, d'effets 
supplementaires. 



A retenir 

■ La classe transitionManager est native et permet d'ajouter des effets de transition directement 
sur des objets de la scene. 

■ La classe transitionManager peut etre suivie d'autres animations avec la sous-classe allTransition- 
OutDone ou allTransitionOutDone ou avec la sous-classe TimerEvent .TIMER_C0MPLETE du 
Timer 

■ Pour controler I'execution d'une fonction a intervalles reguliers, nous utilisons un Timer. 

■ Un Timer execute chaque iteration a la fin de la duree et non au debut. Et requiert, en conse- 
quence, d'appeler une premiere fois la fonction attachee a I'ecouteur du Timer avant de I'executer 
par le Timer. 
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Galerie photo avec transition de filtres 

Dans cette section, nous utilisons la classe filters qui permet, selon le meme principe que 
pour la classe transitionManager, d'appliquer dynamiquement des nitres a des objets 
(flou, ombre portee, halo ou biseau). 

Pour cela, nous utilisons une galerie de photos qui affiche des vues macroscopiques de pla- 
netes a travers une lunette. Chaque transition, d'une image a 1' autre, applique simultane- 
ment des filtres flou, ombre portee, halo et biseau (voir Figure 3.3). Nous obtenons une 
galerie d'images ou chaque transition est globalement floue mais redevient nette une fois 
qu'une nouvelle image a ete affichee. 



Figure 3.3 
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Exemples > ch3_transitionsEffetsEtFiltres_2.fla 

Le document que nous utilisons presente la structure suivante : dans la scene, au-dessus du 
caique f ond_mc (voir Figure 3.4), un symbole nomme galeriejnc contient une suite 
d'images toutes differentes et masquees. A l'interieur du symbole galerie_mc, une action 
stop ( ) empeche la tete de lecture de jouer l'animation (voir Figure 3.5). 



Figure 3.4 
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Figure 3.5 
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Sur la premiere image du caique nomme actions, apparait le code suivant : 
// initialisation 

import f 1 . transitions .* ; 
import fl . transitions . easing .* ; 
import flash. filters. *; 

import gs.*; 
import gs. easing.*; 
import gs. events.*; 

var f lou : BlurFilter=new BlurFilter(0,0,3) ; 

var ombrePortee:DropShadowFilter=new DropShadowFilter(50, 45, 1, 0x000000, 
*»20, 10, 1, 3, false, false, false); 

var halo:GlowFilter=new GlowFilter(0xffffff , 1, 20, 20, 3, 255, false, false); 
var biseau:BevelFilter=new BevelFilter(50,45,0xFFFFFF, 1 ,0x000000,1 ,120,120, 
••1,3, "inner" , false) ; 

var i:Number=1 ; 

var nombreDePhotos:Number=5; 

var dureeBoucle:Number=10000; 

var boucle :Timer=new Timer(dureeBoucle,nombreDePhotos) ; 
galerie_mc . visible=f alse; 
// actions 

boucle . addEvent Listener (Time rEvent .TIMER, lancerBoucle) ; 
boucle . start ( ) ; 

function lancerBoucle(evt:TimerEvent) { 
lancerGalerie( ) ; 

} 

function lancerGalerie( ) { 
galeriejnc . visible=true; 
if (i<=nombreDePhotos) { 

galeriejnc. gotoAndStop(i) ; 

// INITIALISATION 

galeriejnc. filters=[flou] ; 

galeriejnc.f ilters=[ombrePortee] ; 

galeriejnc. filters=[halo] ; 

galeriejnc. filters=[biseau] ; 

//ANIMATION INTRO 

TweenMax.f rom(galerie_mc, 4, {blurFilter: {blurX: 100, blurY:100, 

* quality :3} , delay:0, ease:Strong.easeInOut}) ; 

TweenMax.f rom(galerie_mc, 4, {dropShadowFilter: {distance:5, angle:45, 
»»alpha:1, color: 0x000000, blurX:10, blurY:10, strength:1, 
quality :3, type: "inner" , knockout:false, hideObject:false}, 

• • delay:0, ease:Strong.easeInOut}) ; 
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TweenMax.f rom(galerie_mc, 4, {glowFilter: {color:0xffffff , alpha:1, 
»»blurX:0, blurY:0, strength:1, quality:3, type: "inner" , 

knockout:false}, delay:0, ease:Strong.easeInOut}) ; 
TweenMax.f rom(galerie_mc, 4, {bevelFilter : {distance :5, angle:45, 
* highlightColor:0xffffff , highlightAlpha : 1 , 
— shadowColor: 0x000000, shadowAlpha: 1 , blurX:0, blurY:0, 
»■ strength : 1 , quality:3, type: "inner" , knockout:false}, 

delay :0, ease: Strong. easel nOut}) ; 
//ANIMATION SORTIE 
TweenMax.to(galerie_mc, 4, {blurFilter: {blurX: 100, blurY:100, quality:3}, 

delay :5, ease: Strong. easelnOut}) ; 
TweenMax.to(galerie_mc, 4, {dropShadowFilter:{distance:5, angle:45, 

alpha: 1, color: 0x000000, blurX:10, blurY:10}, delay:5, 
>* ease:Strong.easeInOut}) ; 

TweenMax.to(galerie_mc, 4, {glowFilter : {color :0xffffff, alpha:1, blurX:0, 
*»blurY:0}, delay:5, ease:Strong.easeInOut}) ; 
TweenMax.to(galerie_mc, 4, {bevelFilter: {distance:5, angle:45, 
* color: 0x000000, blurX:0, blurY:0}, delay:5, ease:Strong.easeInOut}) ; 
i++; 
} else { 

galerie_mc . visible=f alse; 

} 

} 

lancerGalerie( ) ; 
Nous importons en premier lieu les classes requises : 
// initialisation 

import f 1 . transitions .* ; 
import fl . transitions . easing .* ; 
import flash. filters.*; 

import gs.*; 
import gs. easing.*; 
import gs. events.*; 

Les premieres classes importees permettent de realiser les interpolations (transitions et 
easing). La classe filters, elle, permet l'exploitation des nitres. Les classes et sous- 
classes Greensockgs permettent l'utilisation de TweenMax pour rendre possible l'animation 
de ces nitres. Attention, cette classe requiert le dossier gs pour importer les classes qui ne 
sont pas disponibles par defaut dans 1' API de Flash (voir Chapitre 2). 

Ensuite, nous predefinissons quatre nitres que nous exploitons plus loin dans le code : 

var flou:BlurFilter=new BlurFilter(100, 100,3) ; 

var ombrePortee:DropShadowFilter=new DropShadowFilter(50, 45, 1, 0x000000, 
*»20, 10, 1, 3, false, false, false); 

var halo:GlowFilter=new GlowFilter(0xffffff , 1, 20, 20, 3, 255, false, false); 
var biseau:BevelFilter=new BevelFilter (50, 45, 0XFFFFFF, 1 ,0x000000, 
1 ,50,50,100,3, "inner" , false) ; 

Tous les parametres renseignes dans chacun des filtres ne sont pas obligatoires, mais leur 
ordre d'affichage est important si leur designation n'est pas renseignee. Par exemple, vous 
pouvez ecrire : 

var f lou:BlurFilter=new BlurFilter(0,0,3) ; 
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Mais vous pouvez aussi ecrire : 

blurFilter:{blurX:100, blurY:100, quality:3} 
ou bien : 

var f lou : BlurFilter = new BlurFilter( ) ; 
flou. quality = BitmpaFilterQuality .MEDIUM; 
flou.blurX = 0; 
flou.blurY = 0; 

Dans le premier cas, la designation n'est pas renseignee. L'ordre de listage des valeurs est 
inchangeable. Dans le second cas (deuxieme et troisieme exemple), la designation est ren- 
seignee. Vous pouvez modifier l'ordre de listage des proprietes et indiquer en premier la 
qualite par exemple sans affecter le bon rendu de l'effet. 

Filtre flou 

Le premier filtre, nomme flou, type et cree un nouvel objet filtre flou BlurFilter (0, 0,3) 
dont les valeurs indiquent un flou de 0 pixel de diametre et de qualite optimale sur une 
echelle de 1 a 3. La valeur du flou est ici portee a zero car en realite nous initialisons le filtre 
flou avant de l'animer. 

II est applique, dans la fonction, grace a la commande suivante : 

var f lou: Blur Filter=new BlurFilter (0,0,3) ; 

galerie_mc.filters=[flou] ; 

Definition des parametres du filtre flou BlurFilter. Le filtre flou se definit selon I'expression 
suivante : 

blurFilter: {blurX: 100, blurY:100, quality:3} 
La definition des parametres du filtre flou sont : 

■ blurFilter, le nom du filtre a appliquer reconnu comme tel par la classe filters. 

■ blurX, indique I'etalement du flou en pixels sur I'axe des X. Une valeur de 50 etale le flou sur une 
distance de 50 pixels en largeur. 

■ blurY, indique I'etalement du flou en pixels sur I'axe des Y. Une valeur de 50 etale le flou sur une 
distance de 50 pixels en hauteur. 

■ quality, indique la qualite du flou. Cette valeur s'exprime sur une echelle de I a 3. 1 correspond 
a un flou grassier mais moins gourmand en ressources graphiques. 2, a un flou moyen et 3, a un 
flou fin ou gaussien, plus gourmand en ressources graphiques. 

Filtre ombre portee 

Le deuxieme filtre, nomme ombrePortee, type et cree un nouvel objet filtre d'ombre portee 
DropShadow(50, 45, 1, 0x000000, 20, 10, 1, 3, false, false, false) dont les valeurs 
indiquent respectivement une ombre de 50 pixels de distance par rapport a 1' objet, 
de 45° d'angle, d'un alpha a 1 (soit 100 %), de couleur noire, d'un flou en X et Y respecti- 
vement de 20 et 10 pixels, d'une force de 1 sur une echelle de 1 a 255, de qualite 3, avec 
une option ombre interieure inactive, un masque inactif, et un cache sur l'objet inactif). 
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Le filtre est applique, plus tard dans la fonction, grace a la commande suivante : 

var ombrePortee:DropShadowFilter=new DropShadowFilter (50, 45, 1, 0x000000, 
20, 10, 1, 3, false, false, false); 

galerie_mc . f ilters=[ombrePortee] ; 

Definitions des parametres du filtre ombre portee DropShadowFilter. Le filtre ombre portee se 
definit selon I'expression suivante : 

dropShadowFilter:{distance:5, angle:45, alpha:1, color: 0x000000, 
»»blurX:10, blurY:10, strength:50, quality:3, type: "inner" , knockout:false, 
*» hideObject:false} 

Les definitions des parametres du filtre ombre portee sont : 

■ dropShadowFilter, le nom du filtre a appliquer reconnu comme tel par la classe filters. 

■ distance, indique le decalage en pixels de I'ombre par rapport a I'objet 

■ angle, designe I'orientation de I'ombre par rapport a la source lumineuse. Une valeur de 45° 
genere une ombre portee legerement decalee vers la droite. Tandis qu'une valeur negative 
I'oriente vers la gauche. 

■ alpha, indique I'opacite de I'ombre. La valeur s'exprime sur une echelle de 0 a 1, en valeur 
decimale. 0.5 indique une ombre semi-transparente. 

■ color, indique la couleur de I'ombre en hexadecimal. Cette valeur doit etre precedee de 0x (zero x). 
Par exemple, la valeur 0x000000 reference un noir. 0x designe en ActionScript une valeur 
hexadecimale. 

■ blurX, indique I'etalement de I'ombre en pixels sur I'axe des X. Une valeur de 50 etale I'ombre sur 
une distance de 50 pixels en largeur. 

■ blurY, indique I'etalement de I'ombre en pixels sur I'axe des Y. Une valeur de 50 etale I'ombre sur 
une distance de 50 pixels en hauteur. 

■ strength, indique la force du filtre sur une echelle de 1 a 255. Ce parametre diffuse I'effet. 

■ quality, indique la qualite de I'ombre. Cette valeur s'exprime sur une echelle de 1 a 3. 
1 correspond a une ombre grossiere mais moins gourmande en ressources graphiques. 2, a une 
ombre moyenne et 3, a une ombre fine, plus gourmande en ressources graphiques. 

■ type, designe la maniere dont I'ombre est appliquee a I'objet. Choisissez la valeur inner pour 
une ombre interne, la valeur outer pour une ombre externe et enfin, la valeur full pour une 
ombre mixte. 

■ knockout, valeur booleenne qui genere un masque a partir de I'effet et retire I'objet (forme un 
trou, un creux) en laissant visible I'arriere-plan. 



Filtre halo 

Le troisieme filtre nomme halo cree et type un nouvel objet filtre halo Glow- 
Filter (0xf f f f f f , 1, 20, 20, 3, 255, false, false) dont les valeurs designent 
respectivement la couleur du halo, son alpha, son rayonnement rlou en X et Y, sa force, sa 
qualite, son action sur l'interieur ou non, et si I'objet halo masque le symbole ou non). 
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Le filtre est applique, plus tard dans la fonction, grace a la commande suivante : 

var halo:GlowFilter=new GlowFilter(0xf ff f ff , 1, 20, 20, 3, 255, false, false); 

galerie_mc.filters=[halo] ; 

Definitions des parametres du filtre halo GlowFilter. Le filtre halo se definit selon I'expression 
suivante : 

glowFilter:{color:0xffffff , alpha:1, blurX:0, blurY:0, strengths, quality:3, 
type: "inner" , knockout :false} 

Les definitions des parametres du filtre halo sont : 

■ glowFilter, le nom du filtre a appliquer reconnu comme tel par la classe filters. 

■ color, indique la couleur du halo en hexadecimal. Cette valeur doit etre precedee de Ox (zero x). 
Par exemple, Oxffffff genere un halo blanc. 

■ alpha, indique I'opacite du halo. La valeur s'exprime sur une echelle de 0 a I, en valeur decimale. 
La valeur 0.5 indique un halo semi transparent. 

■ blurX, indique I'etalement du halo en pixels sur I'axe des X. Une valeur de 50 etale le halo sur 
une distance de 50 pixels en largeur. 

■ blurY, indique I'etalement du halo en pixels sur I'axe des Y. Une valeur de 50 etale le halo sur une 
distance de 50 pixels en hauteur. 

■ strength, indique la force du filtre sur une echelle de I a 255. Ce parametre diffuse I'effet. 

■ quality, indique la qualite du halo. Cette valeur s'exprime sur une echelle de 1 a 3. 1 correspond 
a un halo grassier mais moins gourmand en ressources graphiques. 2, a un halo moyen et 3, a un 
halo fin, plus gourmand en ressources graphiques. 

■ type, designe la maniere dont le halo est applique a I'objet. Choisissez la valeur inner pour un 
halo interne, la valeur outer pour un halo externe et enfin, la valeur full pour un halo mixte. 

■ knockout, valeur booleenne qui genere un masque a partir de I'effet et masque ou retire I'objet 
en laissant visible I'arriere-plan. 

Filtre biseau 

Enfin, un quatrieme filtre nomme biseau cree et type un nouvel objet filtre biseau Bevel- 
Filter(50,45,0xFFFFFF ; 1 ,0x000000, 1 , 50 , 50 , 1 00 , 3 , "inner" , false) dont les para- 
metres designent respectivement la distance, Tangle, la couleur du biseau exposee a la 
lumiere, son alpha, la couleur de l'ombre du biseau, l'alpha de l'ombre, son flou en X et Y, 
sa force, sa qualite, si I'effet est interieur (inner), exterieur (outer), ou mixte (full), et si 
le masque est active ou non. 

Le filtre est applique, plus tard dans la fonction, grace a la commande suivante : 

var biseau : BevelFilter=new BevelFiter (50,45, 0XFFFFFF, 1 ,0x000000,1 ,50, 
■» 50,100,3, "inner" , false) ; 

galerie_mc.filters=[biseau] ; 

Definitions des parametres du filtre biseau BevelFilter. Le filtre biseau se definit selon 
I'expression suivante : 

bevelFilter:{distance:5, angle:45, highlightColor:0xffffff , highlightAlpha: 1 , 
shadowColor: 0x000000, shadow/Alpha : 1 , blurX:0, blurY:0, strength:1, quality:3, 
type: "inner" , knockout :false} 
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Les definitions des parametres du filtre biseau sont : 

■ bevelFilter, le nom du filtre a appliquer reconnu comme tel par la classe filters. 

■ distance, indique le decalage en pixels du biseau par rapport a I'objet. 

■ angle, designe I'orientation du biseau par rapport a la source lumineuse. Une valeur de 45° 
genere un biseau legerement decale vers la droite. Tandis qu'une valeur negative I'oriente vers la 
gauche. 

■ highlightColor, indique la valeur de couleur du biseau qui recoit la lumiere. Generalement 
situe en haut et a gauche, il peut etre inverse selon la valeur definie pour Tangle. 

■ highlightAlpha, indique I'opacite de la couleur du biseau expose a la lumiere. Agit sur le 
parametre precedent highlightColor. 

■ shadow/Color, indique la valeur de couleur du biseau qui recoit I'ombre. Generalement situe en 
bas et a droite, il peut etre inverse selon la valeur definie pour Tangle. 

■ shadowAlpha, indique I'opacite de la couleur du biseau ombre. Agit sur le parametre precedent 
shadowColor. 

■ blurX, indique I'etirement du biseau en pixels sur I'axe des X. Une valeur de 50 etire le biseau sur 
une distance de 50 pixels en largeur. 

■ blurY, indique I'etirement du biseau en pixels sur I'axe des Y. Une valeur de 50 etire le biseau sur 
une distance de 50 pixels en hauteur. 

■ strength, indique la force du biseau sur une echelle de I a 255. Ce parametre diffuse I'effet et 
adoucit le biseau. 

■ quality, indique la qualite du biseau. Cette valeur s'exprime sur une echelle de I a 3. 1 
correspond a un biseau grassier mais moins gourmand en ressources graphiques. 2, a un biseau 
moyen et 3, a un biseau fin, plus gourmand en ressources graphiques. 

■ type, designe la maniere dont le biseau est applique a I'objet. Choisissez la valeur inner pour un 
biseau interne, la valeur outer pour un biseau externe et enfin, la valeur full pour un biseau 
mixte ou estampe. 

■ knockout, valeur booleenne qui genere un masque a partir de I'effet et masque ou retire I'objet 
en laissant visible I'arriere-plan. 



Declinaison des filtres 

Dans notre exemple, une fois les nitres definis nous initialisons certaines variables : 

var i:Number=1 ; 

var nombreDePhotos:Number=5; 

var dureeBoucle:Number=10000; 

var boucle:Timer=new Timer(dureeBoucle,nombreDePhotos) ; 

Nous utilisons les memes variables que dans 1' exemple de la section precedente pour definir 
les valeurs attendues par le chronometre Timer. Reportez-vous a la section precedente pour 
plus de details sur ces valeurs. Puis, nous masquons la galerie par defaut : 

galerie_mc . visible=f alse ; 

Plus loin, comme dans 1' exemple precedent, une fonction genere le defilement des images au 
rythme des iterations imposees par le chronometre. Cette fonction est egalement executee : 
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une fois des la lecture du document Flash avec lancerGalerie ( ) ; et a chaque iteration par 
le chronometre, avec la fonction jouerBoucle(evt:TimerEvent). 
// actions 

boucle . addEvent Listener (Time rEvent .TIMER, lancerBoucle) ; 
boucle . start ( ) ; 

function lancerBoucle(evt:TimerEvent) { 
lancerGalerie( ) ; 

} 

function lancerGalerie( ) { 
galeriejnc . visible=true; 
if (i<=nombreDePhotos) { 

galeriejnc. gotoAndStop(i) ; 

//INITIALISATION 

//(.../...) 

//ANIMATION INTRO 

//(.../...) 

//ANIMATION SORTIE 

//(.../...) 

i++; 
} else { 

galeriejnc . visible=f alse; 

} 

} 

lancerGalerie( ) ; 

Dans la fonction, nous observons trois parties. L' initialisation, l'animation de depart et 
1' animation en sortie. L'animation d'un nitre est distribute dans chacune de ces etapes. 
Prenons pour commencer l'exemple du nitre flou, comme suit : 

// INITIALISATION 
galeriejnc. f ilters=[f lou] ; 

//ANIMATION INTRO 

TweenMax. from (galeriejnc, 4, {blurFilter : {blurX: 100, blurY:10O, quality:3}, 
delay :0, ease:Strong.easeInOut}) ; 

//ANIMATION SORTIE 

TweenMax. to (galeriejnc, 4, {blurFilter : {blurX: 100, blurY:100, quality:3}, 
delay :5, ease:Strong.easeInOut}) ; 

L'animation que nous programmons fonctionne de la maniere suivante : d'abord, la galerie 
est nette une fraction de seconde, mais cela est imperceptible : nous initialisons le nitre flou 
(partie initialisation du code). Ensuite, et instantanement, la galerie apparait floue, puis, pro- 
gressivement, l'image devient nette et legerement bombee avec un biseau tres diffus (partie 
animation intra du code). Puis, apres une pause d'une seconde, progressivement l'image 
redevient entierement floue (partie animation sortie du code). C'est seulement, une fois 
cette seconde boucle terminee que l'image suivante est affichee, le filtre initialise, et que 
l'animation reprend et ainsi de suite, de boucle en boucle, jusqu'a la derniere image de la 
galerie. 

En publiant le document, nous observons que plusieurs filtres sont appliques simultane- 
ment. Vous pouvez supprimer les lignes de commande de chaque filtre individuellement 
pour mieux en apprecier les effets distinctifs si vous le souhaitez. 
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Dans le cheminement de notre animation, il est indispensable d' initialiser d'abord les 
valeurs du filtre que nous animons ensuite, pour la simple raison que notre animation se ter- 
mine par un flou general. Si nous n'initialisons pas les valeurs, 1' animation suivante partira 
d'une image deja rloue pour y ajouter du flou de meme intensite. Nous aurions done 
l'impression que l'animation n'agit pas et que l'image reste floue tout le temps. En initiali- 
sant les valeurs par l'application du filtre des l'execution de la fonction, nous assurons le 
controle du rendu de notre effet en gardant actives ses valeurs. 

Pour animer chaque filtre, dans notre exemple, nous commencons par initialiser les valeurs 
en appliquant directement chaque filtre que nous avons predefini en amont, sur l'objet 
galeriejnc, puis, nous utilisons la classe Greensock TweenMax pour animer le filtre en 
entree et en sortie : 

// INITIALISATION 
galerie_mc.filters=[flou] ; 
//ANIMATION INTRO 

TweenMax. f rom(galerie_mc, 4, {blurFilter:{blurX:100, blurY:100, quality:3}, 
«• delay:0, ease:Strong.easeInOut}) ; 
//ANIMATION SORTIE 

TweenMax. to (galeriejnc, 4, {blurFilter:{blurX:100, blurY:100, quality:3}, 
«• delay:5, ease:Strong.easeInOut}) ; 

Observons que le filtre est introduit dans une interpolation TweenMax comme n'importe 
quelle autre propriete, entre deux virgules. Le filtre est contenu entre deux parentheses et 
l'ensemble des parametres du filtre est contenu entre deux accolades. Chaque propriete du 
filtre est separee par une virgule. 

Faut-il renseigner toutes les proprietes pour les filtres ? Lorsqu'un filtre est place en parame- 
tre d'une interpolation de type TweenMax, il n'est pas necessaire de specifier toutes les proprietes dis- 
ponibles pour le filtre si celles-ci ne requierent pas d'etre modifiees. Leur ordre d'apparition, de meme, 
n'a pas d'incidence, pourvu que leur denomination soit precisee. Si aucune denomination n'est spe- 
cifiee, I'ordre alors est important et correspond, pour chaque filtre individuellement, a celui que avons 
presente dans les notes de cette section. Dans notre exemple, nous specifions volontairement toutes 
les proprietes possibles pour l'animation d'introduction, afin de vous permettre d'en prendre connais- 
sance, mais nous ne les repetons pas pour l'animation de sortie, car les valeurs de ces proprietes ne 
changent pas et les valeurs par defaut, si elles n'ont pas ete modifiee entre temps, s'appliquent auto- 
matiquement. 

Lorsqu'un filtre est applique directement, independamment de la classe TweenMax, a I'initialisation 
par exemple, le typage n'est pas indique, et tous les parametres ne sont pas requis, mais leur ordre est 
important et reprend celui egalement renseigne dans les notes de ce chapitre, dans chaque definition 
de filtre que nous avons developpee. 

Nous savons a present que la classe TweenMax permet de temporiser l'animation grace au 
parametre delay (voir Chapitre 2). Nous n'avons done pas besoin de detecter la fin de l'ani- 
mation avec la classe TweenEvent .MOTION_FINISH comme nous l'aurions fait dans un 
autre contexte, pour enchainer les animations. II suffit ici de decaler les animations dans le 
temps avec le parametre delay et nous les verrons se succeder les unes a la suite des autres. 
Veillons toutefois a ne pas croiser les animations dans le temps. Si la premiere animation 
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dure 4 secondes, la deuxieme serie d' animations demarrera evidemment a plus de 4 secondes, 
par securite (delay : 5). 

Les parametres from et to indiquent respectivement de demarrer les interpolations soit en 
partant (from) soit en terminant (to) sur les valeurs indiquees en parametre de l'interpola- 
tion TweenMax, depuis les valeurs courantes des proprietes appliquees a l'objet (from), ou 
vers ces proprietes (to). Les proprietes courantes de l'objet galerie_mc correspondent a 
celles appliquees par 1' initialisation du filtre a l'etape qui precede la premiere animation 
d'introduction. 

Nous declinons le principe sur les quatre filtres et obtenons : 

function lancerGalerie( ) { 
galeriejnc . visible=true; 
if (i<=nombreDePhotos) { 

galeriejnc. gotoAndStop(i) ; 

// INITIALISATION 

galeriejnc. filters=[flou] ; 

galeriejnc. f ilters=[ombrePortee] ; 

galeriejnc. filters=[halo] ; 

galeriejnc. filters=[biseau] ; 

//ANIMATION INTRO 

TweenMax. from (galeriejnc, 4, {blurFilter: {blurX: 100, blurY:100, 

quality:3}, delay:0, ease:Strong.easeInOut}) ; 
TweenMax. from (galeriejnc, 4, {dropShadowFilter: {distance:5, angle:45, 
**alpha:1, color: 0x000000, blurX:10, blurY:10, strengths , 
«*quality:3, type: "inner" , knockout:false, hideObject :f alse} , 
«• delay :0, ease:Strong.easeInOut}) ; 

TweenMax. from(galeriejnc, 4, {glowFilter: {color :0xffffff, alpha:1, 
blurX:0, blurY:0, strengths, quality:3, type: "inner" , 

■» knockout:false}, delay:0, ease:Strong.easeInOut}) ; 

TweenMax. from (galeriejnc, 4, {bevelFilter: {distance:5, angle:45, 

* highlightColor:0xffffff , highlightAlpha: 1 , 

• shadowColor: 0x000000, shadowAlpha: 1 , blurX:0, blurY:0, 
strength:1 , quality:3, type: "inner" , knockout: false}, 

«■ delay :0, ease:Strong.easeInOut}) ; 
//ANIMATION SORTIE 

TweenMax. to (galeriejnc, 4, {blurFilter:{blurX:100, blurY:100, quality:3}, 
delay :5, ease: Strong. easelnOut}) ; 

TweenMax. to (galeriejnc, 4, {dropShadowFilter: {distance:5, angle:45, 

>»alpha:1, color: 0x000000, blurXMO, blurY:10}, delay:5, 

» ease:Strong.easeInOut}) ; 

TweenMax. to (galeriejnc, 4, {glowFilter: {color :0xffffff, alpha: 1, blurX:0, 

>»blurY:0}, delay :5. ease:Strong.easeInOut}) ; 

TweenMax. to (galeriejnc, 4, {bevelFilter: {distance:5, angle:45, 

color: 0x000000, blurX:0, blurY:0}, delay:5, ease:Strong. 

easelnOut}) ; 
i++; 
} else { 

galeriejnc . visible=f alse ; 

} 

} 
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A retenir 

■ La classe filters est native et permet d'ajouter des filtres directement sur des objets de la scene. 

■ La classe filters peut etre enchainee avec d'autres animations grace a /'utilisation du parametre 
delay de la classe Greensock TweenMax, voire grace a la creation d'un chronometre Timer. 

■ II est important d'initialiser les parametres au debut de chaque animation si Ton veut garantir I'effet 
boucle d'une animation dont les effets affectent les contenus a la fois en entree et en sortie. 

■ Lordre d'affichage des proprietes dans un filtre n'a pas d'incidence si leur designation est specifiee. 

■ Toutes les proprietes d'un filtre ne requierent pas d'etre renseignees si leurs valeurs ne changent pas. 



Synthese 

Vous avez appris a appliquer des effets et des filtres a des objets de la scene et a programmer 
des interpolations d'effets et de filtres a travers des animations generees dynamiquement 
dans le temps. En plus de la classe TweenEvent .MOTION_FINISH, vous avez egalement 
appris a enchainer des animations sur l'echelle du temps grace a l'utilisation du chronome- 
tre Tinier, de sa sous-classe TIMER_EVENT.TIMER_COMPLETE, des sous-classes allTransi- 
tionsInDone, allTransitionsOutDone de la classe transition, et du parametre delay 
de la classe Greensock TweenMax. Vous etes a present en mesure de planifier des actions 
dans le temps en les couplant a des effets graphiques animes et avances. 
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Introduction 

Un squelette est une structure hierarchique qui relie, avec un lien de parente, differents sym- 
boles de la scene ou differentes parties d'une meme forme graphique continue. En 
deployant l'ossature du squelette, les symboles ou les parties de la forme graphique suivent 
la progression du mouvement de la structure qui le compose. 

Pour en programmer l'animation, nous utilisons la classe ik (inverse kinematic en anglais, 
pour cinematique inverse). Cette classe, a ce jour, ne permet pas de realiser directement un 
squelette en programmation, mais uniquement, de l'animer. Les exemples proposes posse- 
dent done deja un squelette, mais nous aborderons egalement la maniere de construire cet 
objet manuellement pour la programmation. 

Une structure articulee autour d'un squelette permet, entre autre, de reconstituer l'ossature 
d'un personnage et de l'animer. Elle permet aussi de distribuer les contenus d'un site sous 
la forme de dispositifs hierarchises, comme un menu ou une arborescence. Mais, si cette 
armature est associee a une forme graphique, cela nous donne aussi acces a des interpolations 
de forme accessibles en programmation. 

Dans ce chapitre, nous realisons dans un premier temps une animation mecanique d'un 
droide dont les mouvements reagissent a la position du pointeur. Nous abordons ensuite 
l'animation de squelettes de formes organiques avec des formes graphiques vectorielles, 
pour animer, par exemple, le mouvement d'un vegetal selon la position d'un objet anime 
(une abeille). Nous presentons ensuite comment gerer une animation programmed en mode 
interactif, afin que l'utilisateur puisse lui-meme modifier le positionnement du squelette en 
deplacant chaque segment de la structure manuellement. 

Les squelettes, lorsqu'ils sont deployes dans des SWF imbriques, ne s'executent plus. Nous 
presentons done aussi une solution pour 1' importation de squelettes en mode Execution, a 
l'interieur de documents Flash imbriques. 

Programmer un mouvement mecanique 

L'animation de squelettes a partir de symboles permet de mettre en mouvement des structu- 
res mecaniques qui font s'articuler des objets entre eux, et ou aucun objet ne se melange 
jamais aux autres. Ce type de structure a base de symboles convient a l'animation de robots, 
de cycles de marche mecaniques, de grues ou de systemes de navigation, entre autres. 

Dans cet exemple, un squelette est deja en place dans le scenario. II represente le corps d'un 
droide et se compose de 15 symboles chacun relie a l'autre par un segment, IKBone (voir 
Figure 4.1). Chaque segment possede deux extremites de jointure ou liaisons (IKJoint) 
placees respectivement en tete (headJoint) et en queue (tailJoint). C'est a partir de ces 
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axes de rotation et de placement que nous determinons les mouvements a travers des inter- 
polations cinematiques (IKMover). La specificite de ces interpolations est de repercuter sur 
chaque symbole faisant partie de la hierarchie, de nouvelles valeurs de positionnement, 
selon les contraintes de mouvement definies dans l'ossature lors de sa construction. 
L'ensemble du squelette est, quant a lui, inclus dans une armature generale (IKArmature) 
dont on peut determiner le mode d'affichage avec une methode (IKManager) et l'afficher, 
soit pour l'animation, soit pour l'execution. 

Heure de creation et execution. La terminologie des modes d'affichage des squelettes peut sur- 
prendre. Nous observons en effet, dans I'lnspecteur de proprietes, les deux options Heure de crea- 
tion et Execution litteralement traduites des termes anglais AuthorTime et RunTime. Comprenez, 
en ces termes, Gestion de l'animation dans I'interface auteur [AuthorTime, ou Heure de creation) 
d'une part et Gestion de l'animation a la publication [RunTime, ou Execution) d'autre part. Nous 
devrions ainsi plutot parler de I'option "Animation" pour le premier et d'"Execution" pour le second. 



Figure 4. 1 

Apercu 

du document. 




Exemples > ch4_ProgrammationDeSquelettes_l .fla 

Le document que nous utilisons presente la structure suivante : dans la scene, au-dessus du 
caique f ond_mc, apparait un caique nomme squelette_Droide (voir Figure 4.2). Chaque 
symbole possede un nom d'occurrence qui definit clairement la partie du corps a laquelle il 
se rattache et le designe en tant qu'objet structurel d'un squelette (ikNode_bassin, 
ikNode_torax, ikNode_cou, ikNode_brasD, ikNode_avantBrasD, ikNodejnainD, etc.). 
De meme, chaque segment qui relie ces symboles entre eux possede son propre nom 
d'occurrence qui identifie la partie de l'ossature a laquelle il est rattache et le designe en tant 
qu'objet structurel de liaison (ikBone_colonneBas, ikBone_colonneHaut, ikBone_epauleD, 
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ikBone_humerusD, ikBone_cubitusD, etc.)- A travers ces identifiants, nous distinguons 
bien les symboles {Nodes) de leurs jonctions {Bones). Le squelette, lui, possede egalement 
son propre nom d'occurrence Squelette_Droide. 



Figure 4.2 

Apercu du 
scenario de la 
scene principale. 
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Dans le caique nomme actions, nous pouvons lire le code suivant : 

// initialisation 

import fl.ik.*; 

// actions 

// definition du squelette 

IKManager.setStage(stage) ; 

var squelette : IKArmature=IKManager . get ArmatureBy Name ( "Squelette_Droide" ) ; 
«» squelette. registerElements(stage) ; 

var segment_colonneBas : IKJoint=squelette . rootJoint . getChildAt (0) ; 
var segment_colonneHaut : IKJoint=squelette. rootJoint .getChildAt (0) .getChildAt (0) ; 
var segment_epauleD: IKJoint=squelette. rootJoint .getChildAt (0) .getChildAt (0) . 
<■* getChildAt (0) ; 

var segment_humerusD: IKJoint=squelette . rootJoint . getChildAt (0) . getChildAt (0) . 
- getChildAt(0) .getChildAt (0) ; 

var segment_cubitusD: IKJoint=squelette . rootJoint . getChildAt (0) . getChildAt (0) . 

getChildAt(0) . getChildAt (0) .getChildAt(O) ; 
var segment_epauleG: IKJoint=squelette. rootJoint .getChildAt (0) .getChildAt (0) . 

getChildAt (1 ) ; 

var segment_humerusG: IKJoint=squelette . rootJoint . getChildAt (0) . getChildAt (0) . 
«► getChildAt (1 ) .getChildAt (0) ; 

var segment_cubitusG: IKJoint=squelette . rootJoint . getChildAt (0) . getChildAt (0) . 
|» getChildAt (1 ) .getChildAt(O) . getChildAt (0) ; 

var segment_illiaqueG: IKJoint=squelette . rootJoint. getChildAt(1 ) ; 
var segment_f emurG: IKJoint=squelette . rootJoint .getChildAt ( 1 ) .getChildAt (0) ; 
var segment_tibiaG: IKJoint=squelette . rootJoint .getChildAt ( 1 ) .getChildAt (0) . 
* getChildAt (0) ; 

var segment_illiaqueD: IKJoint=squelette . rootJoint. getChildAt (2) ; 
var segment_f emurD: IKJoint=squelette . rootJoint .getChildAt (2) .getChildAt (0) ; 
var segment_tibiaD: IKJoint=squelette . rootJoint .getChildAt (2) .getChildAt (0) . 
>» getChildAt (0) ; 

trace (squelette . rootJoint . getChildAt (0) . getChildAt (0) .name) 

// animation du squelette 

var mouvementl : IKMover= new 

IKMover(segment_humerusD,segment_humerusD. position) ; 
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stage. addEventListener(Event.ENTER_FRAME, activerMouvementl ] 
function activerMouvementl (evt:Event) { 

var arrivee : Point=new Point(mouseX,mouseY) ; 

mouvementl .moveTo(arrivee) ; 

} 



Construire un squelette pour la programmation 

Avant de programmer I'animation d'un squelette, il convient de s'assurer qu'il est prealablement bien 
structure. Tout d'abord, nous utilisons la classe ik qui permet de deplacer les tetes de chaque seg- 
ment. II faut done bien comprendre ou se positionnent ces tetes et comment les placer judicieuse- 
ment pour garantir la coherence de I'animation. Pour construire une armature pour la 
programmation, procedez comme suit : 

1 . Placez un certain nombre de symboles de type MovieClip sur un meme caique. 

2. Repositionnez eventuellement les centres de transformation de chaque symbole (grace au petit 
rond blanc que Ton peut deplacer avec I'outil de transformation libre). C'est en effet sur ces cen- 
tres que les segments seront magnetises et c'est leur emplacement qui determine la coherence de 
I'animation. Pour visualiser et deplacer un centre de transformation, utilisez I'outil de transforma- 
tion ou activez le raccourci Q, puis glisser-deposez le petit cercle blanc a I'emplacement souhaite. 
Puis, reactivez I'outil de selection en appuyant sur la touche V Pour faciliter le positionnement des 
centres, pensez a desactiver au besoin les options d'accrochage du menu Affichage. 

3. Si les symboles qui composent votre sujet a animer reposent sur des images bitmap (PSD, PNG, 
JPEG, Gif), activez le lissage des bitmaps pour eviter I'apparition du crenelage lorsque les symboles 
pivoteront (voir Chapitre II). 

4. Placez les segments sur les symboles. Dans la barre d'outils, utilisez I'outil Segment, en forme d'os, 
ou le raccourci X. Puis, cliquez sur le centre de transformation du symbole pere, glissez et relachez 
le bouton de la souris sur le centre de transformation du symbole enfant. 

5. Reproduisez la manipulation autant de fois que vous possedez de symboles a relier entre eux, en 
partant toujours de I'extremite situee en queue d'un segment, puis poursuivez la hierarchie vers 
les autres symboles. 

6. Ajoutez un nom d'occurrence pour chaque objet cree. Pour cela, cliquez sur les segments un a 
un, sur les tetes de segments une a une, et sur le caique du squelette lui-meme, pour leur attri- 
buer a tous des noms d'occurrence distinctifs. Flash en propose par defaut (ikNode_l pour les 
tetes de segment, ikBoneNamel pour les segments et Squelette_1 pour le caique du sque- 
lette). Vous pouvez conserver ces noms ou les adapter a votre perception. 

7. Activez ou non les contraintes de mouvement et de rotation. Pour ce faire, selectionnez chaque 
segment avec I'outil de selection (fleche noire ou raccourci V), et depuis I'lnspecteur de proprietes, 
activez les differentes options de liaison (rotation, translationX et translationY). Atten- 
tion, les valeurs indiquent une rotation relative. Pour faciliter les manipulations, orientez chaque 
symbole sur I'axe median de I'espace de rotation que vous souhaitez lui reserver. En activant 
I'option de rotation, Flash distribue automatiquement une zone de 45° (parametrable) de part et 
d'autre de la position courante de I'objet. 

8. Le squelette doit etre active pour le mode Execution. Pour cela, cliquez sur le caique du squelette. 
Puis, dans I'lnspecteur de proprietes, dans le menu Type de la categorie Options, selectionnez 
Execution. 
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Definition du squelette 

Pour comprendre la maniere dont nous interagissons en ActionScript avec les elements du 
squelette, nous devons au prealable bien saisir la maniere dont celui-ci a ete construit. Dans 
notre exemple, nous disposons d'une armature composee de 15 segments. Certains d'entre 
eux sont rattaches au meme noeud de liaison. Chaque branche qui se divise, dans la hierar- 
chie descendante de l'armature, n'est pas consideree comme un ensemble indepen- 
dant, mais bien comme faisant partie d'un meme ensemble. Ce qui distingue une division 
par rapport a une autre est son ordre d' apparition dans la liste d'affichage du squelette (ce qui 
equivaut par defaut a 1' ordre de creation des noeuds), ou a son nom d' occurrence. Pour contro- 
ler une branche plutot qu'une autre, nous ciblerons done celle-ci par son ordre d'affichage 
(getChildAt (0) ) ou par son nom d'occurrence (getNodeByName( "nomDuNoeud" ) ). 

Ainsi, avant de programmer des actions, il est souhaitable d' identifier clairement la hierar- 
chie dont nous disposons. Pour notre exemple, nous avons realise un schema qui reprend 
T ordre de chaque segment de liaison tel qu'identifie depuis la liste d'affichage (voir 
Figure 4.3) (nous presentons la maniere d'obtenir l'ordre d'affichage de chaque segment 
dans la lecture du code qui suit). 



Figure 4.3 

Apercu 

de la structure 

du squelette. 
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Dans notre exemple a nouveau, relevons que nous avons commence la construction du 
squelette a partir du bassin, en progressant d'abord vers le cou, puis la jambe gauche et enfin 
vers la jambe droite. Le bassin se divise done, des le depart, en trois branches distinctes que 
nous pouvons identifier par la branche 0 (cou), la branche 1 (jambe gauche) et la branche 2 
(jambe droite). Le cou, a son tour, se divise en deux parties, une pour chaque bras. 
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Nous obtenons done les subdivisions suivantes : avec la branche 0 qui correspond au bras droit, 
et 1 qui correspond au bras gauche. Mais, dans le contexte hierarchique qui part du bassin, et se 
prolonge par le thorax avant d'atteindre les epaules, nous pouvons identifier la branche du bras 
droit comme liaison 0.0.0 et celle du bras gauche comme liaison 0.0. 1 . Et ainsi de suite. En 
somme, a chaque progression vers un sous-niveau de 1' armature, nous ajoutons une valeur. 

Creation de squelettes humains. Le livre L'art du bluff avec Flash CS4, de Chris Georgennes, aux 
editions Pearson, propose d'ajouter un segment a I'aplomb du bassin afin de le relier au sol. Pour de 
plus amples renseignements sur la construction de squelettes d'animation, notamment humains, 
reportez-vous a cet ouvrage. 

Le code affiche est compose de trois parties. D'abord, nous definissons les classes et les 
variables a utiliser (initialisation). Ensuite, nous structurons les elements destines a etre ani- 
mes (identification des elements animables). Enfin, nous realisons l'animation. Celle-ci se 
caracterise d'abord par le controle du mouvement des liaisons du squelette (animation du 
squelette), puis par la mise en relation de ces mouvements avec le pointeur a travers la fonction. 

Nous commencons par importer les classes requises pour l'animation du squelette : 

// initialisation 

import fl.ik.*; 

La classe ik est utilisee pour la gestion des mouvements de liaison du squelette. Lasteris- 
que sous-entend l'importation des sous-classes IKArmature (definition du squelette), 
IKBone (definition des segments qui contiennent les liaisons), IKEvent (definition des eve- 
nements pour les fonctions), IKJoint (definition des liaisons a animer), IKManager 
(definition du statut du squelette) et IKMover (definition des animations en tant que telles). 

Puis, nous activons le squelette pour pouvoir, ensuite, en animer la composante : 

// actions 

// definition du squelette 

IKManager. setStage(stage) ; 

var squelette :IKArmature=IKManager.getArmatureByName( "Squelette_Droide" ) ; 
squelette . registerElements(stage) ; 

Dans ces premieres lignes, grace a la sous-classe IKManager qui permet de statuer sur le 
comportement du squelette, nous affectons le controle du squelette a la scene courante. 
Mais cette instruction est optionnelle car 1' API de Flash le gere automatiquement : 

IKManager. setStage(stage) ; 

Puis, nous convertissons le squelette de la scene en objet IKArmature programmable. Pour 
cela, nous instancions un nouvel objet IKArmature en reprenant, en parametre de la 
methode getArmatureByName(), le nom d'occurrence du squelette que nous avons pu 
identifier depuis l'lnspecteur de proprietes directement sur la scene principale : 

var squelette : IKArmature= IKManager . getArmatureByName ( "Squelette_Droide" ) ; 

Pour cibler le squelette, nous utilisons ici getArmatureByName puisque nous en connais- 
sons le nom. Mais nous aurions aussi bien pu le cibler par son ordre d'affichage, dans la liste 
d'affichage des squelettes independante de la liste d'affichage de la scene, avec la methode 
getArmatureAt ( ). 
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Nous memorisons ensuite toute l'ossature du squelette presente sur la scene de sorte a en 
autoriser le controle avec la methode registerElements ( ) : 

squelette . registerElements (stage) ; 

Une fois que nous avons instancie la structure globale, nous pouvons a present entrer dans 
les maillons du squelette et declarer chacune des liaisons dont nous souhaitons pouvoir 
controler la position : 

var segment_colonneBas :IKJoint=squelette. root Joint . getChildAt (0) ; 

Pour declarer la premiere liaison, nous creons un nouvel objet IKJoint. Nous ciblons le 
premier noeud de liaison en reprenant d'abord le nom du squelette vehicule par la variable 
squelette, puis, ciblons le nceud racine avec root Joint, c'est-a-dire le centre de transforma- 
tion du bassin bas, puis, la premiere branche qui remonte la colonne vertebrale avec get- 
ChildAt (0) (voir Figure 4.4). 

Pour verifier que l'ordre d' apparition choisi en parametre correspond bien a 1' objet que 
nous souhaitons rendre disponible sur la scene, nous utilisons une action t race en reprenant 
le ciblage auquel nous associons la propriete . name pour connaitre le nom d'occurrence de 
1' objet : 

trace (squelette . root Joint .getChildAt (0) .getChildAt (0) .name) 
Nous ob tenons, dans la fenetre de sortie, la reponse suivante : 
Segment_cou 

Nous reproduisons ensuite le principe pour tous les segments, afin d'en permettre V animation : 

var segment_colonneBas : IKJoint=squelette . rootJoint . getChildAt (0) ; 
var segment_colonneHaut : IKJoint=squelette . rootJoint. getChildAt (0) . 
•» getChildAt (0) ; 

var segment_epauleD: IKJoint=squelette. rootJoint .getChildAt (0) .getChildAt (0) . 
» getChildAt (0) ; 

var segment_humerusD: IKJoint=squelette . rootJoint . getChildAt (0) . getChildAt (0) . 
«* getChildAt(0) .getChildAt (0) ; 

var segment_cubitusD: IKJoint=squelette . rootJoint . getChildAt (0) . getChildAt (0) . 
* getChildAt (0) .getChildAt (0) . getChildAt (0) ; 

var segment_epauleG: IKJoint=squelette. rootJoint .getChildAt (0) .getChildAt (0) . 
* getChildAt (1 ) ; 

var segment_humerusG: IKJoint=squelette . rootJoint . getChildAt (0) . getChildAt (0) . 
• getChildAt(1 ) .getChildAt (0) ; 

var segment_cubitusG: IKJoint=squelette . rootJoint . getChildAt (0) . getChildAt (0) . 
<■* getChildAt (1 ) .getChildAt (0) . getChildAt (0) ; 

var segment_illiaqueG : IKJoint=squelette . rootJoint. getChildAt(1 ) ; 

var segment_f emurG: IKJoint=squelette . rootJoint. getChildAt (1 ) .getChildAt (0) ; 

var segment_tibiaG: IKJoint=squelette . rootJoint .getChildAt ( 1 ) .getChildAt (0) . 
* getChildAt (0) ; 

var segment_illiaqueD : IKJoint=squelette . rootJoint. getChildAt(2) ; 

var segment_f emurD: IKJoint=squelette . rootJoint .getChildAt (2) .getChildAt (8) ; 

var segment_tibiaD: IKJoint=squelette . rootJoint .getChildAt (2) .getChildAt (0) 
- .getChildAt(0) ; 

Observons que pour atteindre un maillon enfant, nous utilisons la technique de ciblage 
pointe en ajoutant, pour chaque nouveau segment enfant, la methode getChildAt ( ) avec le 
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numero qui correspond a l'ordre d'affichage de 1' enfant cible, conformement au schema 
observe plus haut. 

II est possible de cibler uniquement un segment a partir de son identifiant, comme suit : 
var segment 1 : IKBone=squelette .getBoneByName ( "ikBoneNamel " ) ; 

Ou a partir de son ordre d'affichage : 

var segment 1 : IKBone=squelette .getBoneByName ( "ikBoneNamel " ) ; 

Une fois les liaisons definies, il ne reste plus qu'a animer. 

Animer le squelette 

La propriete rotation n'etant pas autorisee en ecriture par la classe IK, pour animer une liaison, 
nous definissons done un nouvel objet de transition qui deplace une liaison d'un point donne en 
X et Y a un autre point en X et Y. Pour mieux comprendre le precede, simplifions notre 
exemple en nous concentrant d'abord sur le fonctionnement d'une animation de liaison : 

// animation du squelette 
var mouvementl : IKMover= new 

IKMover (segment_humerusD, segment_humerusD. position) ; 
var arrivee : Point=new Point(0,0); 
mouvementl .moveTo(arrivee) ; 

Nous declarons ici, en premier, 1' objet IKMover qui constitue le moteur de 1' animation et 
redistribue, pour chaque segment lie a la chaine courante, les valeurs necessaires a leur 
eventuel repositionnement : 

var mouvementl : IKMover= new IKMover(segment_humerusD, segment_humerusD. position) ; 

L' animation appelle deux parametres qui sont respectivement I'objet a animer (en l'occur- 
rence, la liaison segment_humerusD definie precedemment), et les coordonnees du point de 
depart de 1' animation de cet objet, a partir d'une valeur de type Point (X,Y). 

Definition du constructeur Point(). Une valeur de type Point (X, Y) vehicule, dans une seule 
variable, les proprietes x et y de I'objet auquel elle est rattachee. Ce constructeur peut, pour informa- 
tion, etre appele par les classes suivantes : BitmapData, DisplayObject, DisplayObjectContainer, 
DisplacementMapFilter, NativeWindow, Matrix ou Rectangle. 

Ainsi, nous pouvons determiner la valeur de position de depart a travers une nouvelle variable 
ou en reprenant la position courante de I'objet a animer. Avec une variable, nous obtenons : 

var depart : Point=new Point(100,50) ; 

var mouvementl : IKMover= new IKMover(segment_humerusD, depart) ; 
En reprenant directement la propriete position de I'objet courant, nous obtenons : 
var mouvementl : IKMover= new 

IKMover (segment_humerusD,segment_humerusD. posit ion) ; 

Nous recuperons directement la position courante de I'objet a animer. Puis, nous definissons le 
point d' arrivee : 

var arrivee : Point=new Point(0,0); 
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Et enfin, nous activons 1' animation : 

mouvementl .moveTo(arrivee) ; 

L' animation reprend l'objet IKMover initie plus haut et utilise la methode moveTo afin de 
creer une interpolation entre le point de depart defini dans l'objet IKMover et le point d'arrivee 
passe ici en parametre. 

Dans le fichier exemple de cette section, 1' interpolation que nous venons de decrire, est 
placee dans une fonction associee a un gestionnaire d'evenements de type 
Event . ENTER_FRAME afin que le calcul de la position puisse etre redefini perpetuellement. 
Nous placons, en parametre du point d'arrivee, les valeurs qui correspondent a la position 
courante du pointeur avec mouseX et mouseY. Nous obtenons : 

// animation du squelette 
var mouvementl : IKMover= new 

IKMover (segment_humerusD, segment_humerusD. position) ; 

stage. addEventListener(Event.ENTER_FRAME, activerMouvementl ) ; 

function activerMouvementl (evt:Event) { 

var arrivee:Point=new Point (mouseX, mouseY) ; 

mouvementl .moveTo(arrivee) ; 

} 

Pour optimiser encore plus l'animation, vous pouvez eventuellement typer la variable arrivee 
en dehors de la fonction, et la mettre a jour seulement dans la fonction, comme suit : 

// animation du squelette 
var mouvementl : IKMover= new 

IKMover (segment_humerusD, segment_humerusD. position) ; 
var arrivee : Point ; 

stage. addEventl_istener(Event.ENTER_FRAME, activerMouvementl ) ; 
function activerMouvementl (evt:Event) { 

arrivee=new Point (mouseX, mouseY) ; 

mouvementl .moveTo(arrivee) ; 

} 

En modifiant le parametre qui appelle le nom de l'objet a animer, dans l'objet IKMover, vous 
pouvez animer le squelette a partir de chacun des axes de rotation (voir Figures 4.4 et 4.5). 



A retenir 

■ La classe ik permet d'animer la position des liaisons etablies entre plusieurs segments d'un meme 
squelette. 

■ Pour programmer l'animation d'un squelette, vous devez au prealable construire le squelette dans 
I'interface auteur de Flash en activant I'affichage pour I'execution depuis I'lnspecteur de proprietes. 

■ Pour faciliter la gestion de I'articulation des segments, vous devez placer judicieusement les centres 
de transformation de chaque symbole avant la creation du squelette. 

■ Pour faciliter la definition des liaisons a animer, vous devez clairement identifier I'ordre d'affichage 
de ces elements. 

■ II est possible d'associer le mouvement d'une liaison a la position courante du pointeur. 
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Figure 4.4 

Apercu de 
I'animation 
avec I'objet 
segment_tibiaD. 




Figure 4.5 

Apercu de 
I'animation 
avec I'objet 
segment_avant- 
BrasG. 




Programmer un mouvement organique 

De la meme maniere que nous animons des squelettes de symboles, nous pouvons aussi 
programmer I'animation de squelettes pour des formes graphiques vectorielles. 

L'utilisation des squelettes avec les formes vectorielles permet de realiser, par exemple, des 
animations de "lipsync" (mouvement de bouche), des animations vegetales, organiques, liquides 
ou heterees (radiosite, vapeurs, nuages), entre autres, mais pas de formes transparentes. 

Dans cette section, nous utilisons I'animation d'une plante qui se courbe au passage d'une 
abeille. Nous utilisons ici les parametres de la methode moveTo pour magnetiser la derniere 
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liaison de la plante sur l'abscisse du symbole abeille (voir Figure 4.6). L'abeille, elle, est 
animee a l'aide de la classe Greensock TweenMax. 



Figure 4.6 

Apercu 

du document. 





Exemples > ch4_programmationDeSquelettes_2.fla 

Dans la scene de notre document, nous pouvons voir, au-dessus du caique f ond_mc, un 
squelette attache a une forme graphique nomme Squelette_Herbe. Au premier plan de 
cette armature, apparaissent quelques feuilles et un pot pour la decoration, puis un symbole 
de type MovieClip nomme abeillejnc (voir Figure 4.7). 



Figure 4.7 

Apercu du 
scenario de la 
scene principale. 
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Dans le caique des actions, nous pouvons lire le code suivant : 

// initialisation 

import gs.*; 
import gs. easing.*; 
import gs. events.*; 

// 

import fl.ik.*; 

// actions 

// definition du squelette 

IKManager.setStage(stage) ; 
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var squelette : IKArmature=IKManager . get ArmatureBy Name ( "Squelette_Herbe" ) ; 
squelette . registerElements (stage) ; 

var segment_colonneBas : IKJoint=squelette . rootJoint . getChildAt (0) . getChildAt (0) 
* . getChildAt (0) .getChildAt(0) .getChildAt(0) .getChildAt(0) .getChildAt(0) . 
getChildAt (0) .getChildAt (0) . getChildAt (0) ; 

// animation du squelette 

var mouvementl : IKMover= new 

IKMover (segment_colonneBas, segment_colonneBas . position) ; 

stage. addEventl_istener(Event.ENTER_FRAME, activerMouvementl ) ; 
function activerMouvementl (evt:Event) { 

var arrivee:Point=new Point(abeille_mc.x,abeille_mc.y) ; 

mouvementl .moveTo(arrivee) ; 

} 

var tweenAbeille:TweenMax; 

tweenAbeille=TweenMax . to(abeille_mc,5, {x : 900, delay : 2, ease : Strong . easel nOut } ) ; 
tweenAbeille . addE vent List ener(TweenE vent .COMPLETE, suit eAnimat ion) ; 

function suiteAnimation(evt:TweenEvent) { 

tweenAbeille=TweenMax.to(abeille_mc,8,{x:300,delay : 0, ease: Back. ease I nOut}) ; 

} 

Comme dans l'exemple precedent, nous devons commencer par identifier l'ordre d'affi- 
chage des segments du squelette. Nous procedons, de meme, en reperant le nom des occur- 
rences depuis l'lnspecteur de proprietes et en determinant le nombre de liaisons disponibles 
ainsi que la presence eventuelle de subdivisions multiples (voir Figure 4.8). 



Figure 4.8 

Apercu de la 
structure du 
squelette nomme 
Squelette_Herbe. 




Notre squelette ne comporte pas de subdivision. II compte dix liaisons. Son nom d'occur- 
rence est Squelette_Herbe. Les contraintes de rotation des liaisons ont ete activees depuis 
l'lnspecteur de proprietes. 
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Ces contraintes ont plus particulierement ete marquees sur la base de l'ossature afin de ren- 
forcer l'effet d'enracinement et d'inertie pour la partie proche du pot, et donner un effet de 
pousse legere au sommet de la tige. Des contraintes identiques sur toute la longueur 
auraient donne une impression de structure entierement molle ou totalement rigide, selon 
les valeurs d'angle enregistrees. 

Dans les actions, nous importons d'abord les classes requises : 

// initialisation 

import gs.*; 
import gs. easing.*; 
import gs. events.*; 

// 

imp/ort fl.ik.*; 

En plus de la classe ik utilisee pour la cinematique inverse, nous importons la classe 
TweenMax (gs) pour animer le deplacement de l'abeille. 

Plus loin, nous definissons le squelette avec IKManager et IKAmrature, comme vu dans la 
section precedente. 

// actions 

// definition du squelette 

IKManager. setStage(stage) ; 

var squelette : IKArmature=IKManager . get ArmatureBy Name ( "Squelette_Herbe" ) ; 
squelette . registerElements (stage) ; 

Puis, comme nous l'avons vu precedemment , nous definissons le segment a animer: 

var segment_colonneBas : IKJoint=squelette . rootJoint . getChildAt (0) . getChildAt (0) 

. getChildAt (0) .getChildAt(0) . getChildAt (0) .getChildAt(0) .getChildAt(O) . 
» getChildAt (0) .getChildAt (0) . getChildAt (0) ; 

Ici, le segment que nous ciblons est le dernier de la chaine. Elle en compte dix. Nous repetons 
done dix fois le ciblage progressif jusqu'a atteindre notre cible. 

Puis, nous animons l'objet en liant, cette fois-ci, ses coordonnees a celles de l'abeille, par 
1' intermediate d'une transition TweenMax : 

// animation du squelette 
var mouvementl : IKMover= new 

IKMover (segment_colonneBas, segment_colonneBas . position) ; 

stage. addEventListener(Event.ENTER_FRAME, activerMouvementl ) ; 
function activerMouvementl (evt:Event) { 

var arrivee:Point=new Point (abeille_mc. x, abeille_mc. y) ; 

mouvementl .moveTo(arrivee) ; 

} 

var tweenAbeille: TweenMax; 

tweenAbeille=TweenMax . to(abeille_mc,5, {x : 900, delay : 2, ease : Strong . easel nOut } ) ; 

Lorsque l'abeille se deplacera a partir de sa position x actuelle (inferieure a 0) vers la posi- 
tion derinie dans la transition, soit 900 px, la fonction associee a la classe Event et a l'eve- 
nement ENTER_FRAME va permettre de repositionner le dernier segment selon la position x 
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de l'abeille en mouvement. Les segments etant relies, et la methode MoveTo repercutant les 
valeurs de positionnement vers les autres liaisons en fonction de leurs con train tes respectives, 
l'herbe haute va se courber pour suivre l'abeille dans son deplacement. 

Nous terminons avec un enchainement de transition : 

tweenAbeille . addE vent List ener(TweenE vent .COMPLETE, suit eAnimat ion) ; 

function suiteAnimation(evt:TweenEvent) { 

tweenAbeille=TweenMax.to(abeille_mc,8,{x:300,delay : 0, ease: Back. ease I nOut}) ; 

} 

Ici, une seconde interpolation succede a la premiere, grace a l'evenement COMPLETE associe 
a la classe TweenEvent. Cette transition fait revenir, en marche arriere, l'abeille, de sorte 
qu'elle se place juste au-dessus de la plante. La fonction activerMouvementl qui demeure 
toujours active permet a la plante animee de continuer de suivre l'abeille jusqu' a son point 
arret. Tout nouveau mouvement que fera l'abeille par la suite provoquera un nouveau 
mouvement de l'herbe (voir Figure 4.9 a 4.12). 



Figure 4.9 

Apercu 

de I'animation 

organique (1/4). 




Figure 4.10 

Apercu 

de I'animation 

organique (2/4). 
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Figure 4.1 1 

Apercu 

de I'animation 

organique (3/4). 



Figure 4.12 

Apercu 

de I'animation 

organique (4/4). 



A retenir 

■ II est possible de programmer I'animation de formes vectorielles avec la classe ik. 

■ Une liaison d'un squelette de forme vectorielle peut suivre un objet en mouvement. 

■ II est possible de combiner des animations de type TweenMax avec des transitions de la classe iKMover. 
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Basculer du mode animation programmee au mode 
execution 

La programmation d'une animation de squelette requiert, pour le squelette actif de la scene 
courante, que le menu Type de la categorie Options soit defini sur Execution. Mais, une fois 
que P animation est programmee, il est possible de rendre la main a Putilisateur pour lui 
autoriser de deplacer lui-meme les segments des objets animes. 

Dans cette section, nous presentons comment basculer du mode d' animation programmee 
au mode 100 % interactif de Paffichage de Parmature, avec la classe IKManager (voir 
Figure 4.13). 



Figure 4.1 3 

L'utilisateur prend 
le controle du 
positionnement 
des liaisons. 




Exemples > ch4_programmationDeSquelettes_3.fla 

Le document que nous utilisons presente la structure suivante : dans la scene, nous retrouvons 
les memes elements que dans la section precedente. 

Dans le caique des actions, nous pouvons lire le code suivant, base sur Pexemple precedent, 
mais nous y avons ajoute les commandes necessaires au basculement de la propriete : 

// initialisation 

import gs.*; 
import gs. easing.*; 
import gs. events.*; 

// 

import fl.ik.*; 



// actions 

// definition du squelette 
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IKManager.setStage(stage) ; 

var squelette : IKArmature=IKManager . get ArmatureBy Name ( "Squelette_Herbe" ) ; 
squelette . registerElements (stage) ; 

var segment_colonneBas : IKJoint=squelette . root Joint .getChildAt (0) . getChildAt (0) 
. getChildAt (0) .getChildAt(0) .getChildAt(O) . getChildAt (0) .getChildAt(O) . 
getChildAt (0) .getChildAt (0) . getChildAt (0) ; 

// animation du squelette 

var mouvementl : IKMover= new 

IKMover (segment_colonneBas, segment_colonneBas . position) ; 

stage. addEventListener(Event.ENTER_FRAME, activerMouvementl ) ; 
function activerMouvementl (evt:Event) { 

var arrivee : Point=new Point (abeille_mc.x, abeille_mc.y ) ; 

mouvementl .moveTo(arrivee) ; 

} 

var tweenAbeille:TweenMax; 

tweenAbeille=TweenMax. to (abeille_mc, 5, {x: 900, delay : 2, ease: Strong. easel nOut}) ; 
tweenAbeille . addE vent List ener(TweenE vent .COMPLETE, suit eAnimat ion) ; 

function suiteAnimation(evt:TweenEvent) { 

tweenAbeille=TweenMax.to(abeille_mc,8, {x : 300, delay :0, ease: Back. easelnOut}) ; 
tweenAbeille. addEvent Listener (TweenE vent .COMPLETE, suiteAnimation2) ; 

} 

// interrompre 1' animation et basculer en mode interactif 

var nombreDeBoucle : Number=1 ; 
var dureeBoucle:Number=1000; 

var boucle:Timer=new Timer(dureeBoucle, nombreDeBoucle) ; 

function suiteAnimation2(evt:TweenEvent) { 
IKManager . trackAHArmatu res (true) ; 
boucle . start ( ) ; 

boucle . addE vent List ener (TimerEvent .TIMER, lancerBoucle) ; 

} 

function lancerBoucle(evt:TimerEvent) { 

stage . removeE vent List ener (Event . ENTER_FRAME, activerMouvementl ) ; 

} 

Pour detecter la fin de l'animation, nous utilisons un nouvel ecouteur attache a l'objet 
anime, en 1' occurrence, il s'agit de la seconde animation de l'abeille definie dans la fonction 
suiteAnimatioM . Lorsque cette animation est achevee, nous programmons l'execution 
d'une nouvelle fonction suiteAnimation2. Dans cette fonction, trois instructions sont 
ajoutees : 

function suiteAnimation2(evt:TweenEvent) { 
IKManager . trackAHArmatures( true) ; 
boucle . start ( ) ; 

boucle . addE vent List ener (TimerEvent .TIMER, lancerBoucle) ; 

} 
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La premiere reprend la classe IKManager employee au debut du code pour specifier, a tra- 
vers la propriete trackAllArmatures, que le deplacement de toute l'armature par l'utilisa- 
teur est desormais actif (true), selon les memes contraintes de rotation, definies 
initialement depuis l'lnspecteur de proprietes, que pour l'animation programmee. 

Les deux suivantes activent d'abord un chronometre de type Timer defini plus haut. Ces ins- 
tructions associent, a ce meme chronometre, une nouvelle fonction qui interrompt 1' anima- 
tion de la liaison activerMouvementl dont la position est rattachee a celle de l'abeille, 
grace a la methode removeEventListener : 

function lancerBoucle(evt:TimerEvent) { 

stage. removeEventListener(Event.ENTER_FRAME, activerMouvementl ) ; 

} 

Notez que nous aurions pu interrompre la fonction directement dans la fonction 
suiteAnimation2, avec la meme methode removeEventListener. Mais, en procedant 
de la sorte, l'animation peut rendre un peu brutal l'arret du positionnement des elements 
de liaison. En effet, l'animation est geree par la classe IKMover et le moteur utilise un 
repositionnement qui comporte un algorithme d' acceleration. L'animation aurait alors ete 
interrompue au moment oil le TweenMax s'acheve, meme si 1' interpolation IKMover 
n'etait pas terminee (du fait de l'amortissement). Afin que l'animation s'arrete de maniere 
plus naturelle, nous avons recours a un Timer. Ceci laissera le temps a l'animation de 
l'abeille de terminer l'effet d'amortissement de son arret. Ensuite l'utilisateur pourra 
prendre la main. 

A retenir 

■ Vous pouvez, a Tissue d'une animation programmee, rendre la main a l'utilisateur, pour lui permettre 
de deplacer lui-meme les liaisons du squelette de I'objet anime. 

■ Les transitions IKMover utilisent un repositionnement qui comporte un algorithme d'acceleration et 
obligent, pour les interrompre, d'utiliser un chronometre de type Timer afin d'eviter que la rupture 
ne soit trap seche. 

■ Pour basculer d'un mode d'execution a un autre, nous utilisons la classe IKManager. 

Activer un squelette charge dans un SWF 

Lorsqu'un document SWF qui comporte un squelette en mode Execution est importe dans 
un nouveau document SWF, le squelette n'est pas actif dans 1' interface de ce nouveau docu- 
ment. Cela s'explique par le fait que seul le document qui contient le squelette est compile 
avec les objets d'affichages qui gerent ce squelette. Meme, en construisant un nouveau 
squelette dans le fichier appelant, le squelette importe ne reagit toujours pas. II en resulte 
que tout document, depourvu d'une action specifique sur l'importation des squelettes, ne 
peut executer le squelette contenu dans tout document importe. II est done necessaire de 
reconfigurer le document appelant, de sorte qu'il puisse executer correctement le fichier 
appele. 
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Les noms du fichier appelant. Suite a un bogue du moteur Flash, il est possible que vous ne 
parveniez pas a importer un document si vous placez des caracteres non ascii dans le nom du 
fichier. Utilisez de preference des lettres collees, sans separateur tiret -). Pour separer les mots, pre- 
ferez le underscore ou tiret du bas (_). Les tirets peuvent ne pas etre admis dans certaines configu- 
rations. 



Dans cette section, nous importons un document SWF contenant un squelette de forme, 
publie en mode Execution et le reactivons pour l'executer dans ce premier document. 



©Exemples > ch4_programmationDeSquelettes_4.fla 
Exemples > ch4_programmationDeSquelettes_4a.fla 

Le document que nous utilisons se nomme "ch4ProgrammationDeSquelettes4.fla". Dans la 
scene, rien ne figure sinon le caique f ond_mc (voir Figure 4.14). 



Figure 4.14 

Apercu du 
scenario de la 
scene principale. 
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Dans le caique des actions, nous pouvons lire le code suivant : 

// initialisation 

import fl.ik.*; 



// chargement 

var chemin:URLRequest = new URLRequest ( "ch4-programmationDeSquelettes-4a. swf ") ; 
var chargeur: Loader = new Loader(); 
chargeur.load(chemin) ; 

chargeur. contentLoaderlnfo.addE vent List ener( Event .COMPLETE, aff icher) ; 



var squelette:IKArmature; 



function afficher(Evt:Event){ 
addChild(chargeur) ; 

// 

IKManager.setStage(stage) ; 

squelette = IKManager.getArmatureByName( "Squelette_Herbe" ) ; 
squelette . registerElements (stage) ; 
IKManager . trackAHArmatu res (true) ; 

} 

D'abord, nous importons la classe ik pour reconstituer le squelette : 

// initialisation 

import fl.ik.*; 
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Puis, nous derinissons un nouveau chargeur afin d'importer le fichier SWF contenant le 
squelette : 

// chargement 

var chemimURLRequest = new URLRequest ( "ch4-programmationDeSquelettes-4a.swf " ) ; 

var chargeur: Loader = new Loader(); 
chargeur. load(chemin) ; 

chargeur. contentLoaderlnfo.addE vent List ener( Event .COMPLETE, aff icher) ; 

Lorsque le chargement du document est termine, nous commencons par definir un espace 
memoire pour la creation d'une armature : 

var squelette : IKArmature; 

Puis, nous executons la fonction qui affiche le contenu et reactive 1' armature du document 
importe : 

function afficher(Evt:Event){ 
addChild (chargeur) ; 

// 

IKManager.setStage(stage) ; 

squelette = IKManager.getArmatureByName( "Squelette_Herbe" ) ; 
squelette . registerElements (stage) ; 
IKManager . trackAHArmatures ( true) ; 

} 

A la suite de l'instruction addChild, la fonction place l'affectation du moteur de squelette 
sur la scene courante avec setStage(). L'instruction getArmatureByName ( ) permet de 
pointer sur le squelette en utilisant le nom d' occurrence utilise dans le SWF importe. 
Puis, elle memorise les proprietes du squelette sur la scene globale avec register- 
Elements(stage) et l'active avec trackAHArmatures passe sur true. C'est la derniere 
instruction qui permet de reactiver le mode d'affichage Execution. 

Cette fois, en publiant le document SWF, nous pouvons constater que le document importe 
est active. II est done possible de deplacer les liaisons avec le pointeur et la plante preserve 
les contraintes definies dans le document importe (voir Figure 4.15). 

Figure 4.15 

Apercu du SWF 
importe et 
execute. 
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A retenir 

■ II est possible de reactiver un squelette desactive automatiquement, apres I'avoir importe dans un 
nouveau document SWF Pour cela, vous devez reactiver le squelette par programmation dans le 
document appelant, afin de reimplanter le moteur d'execution du squelette exclusif a I'API de Flash, 
lors de la publication du nouveau document. 



Synthese 

Dans ce chapitre, vous avez appris a programmer des animations a partir de squelettes crees 
manuellement dans 1' interface auteur de Flash. Vous avez appris a creer des animations 
mecaniques et organiques en exploitant des structures a base de symboles ou de formes. 
Vous avez egalement appris a programmer les animations de squelette en utilisant des objets 
et/ou le pointeur de la souris comme guide de mouvement. Vous savez enfin activer le mode 
d'execution une fois 1' animation achevee, et permettre a l'utilisateur de reprendre la main 
sur l'armature a la fin d'une interpolation. Vous etes en mesure a present de realiser des ani- 
mations de structure complexes et encore une fois dynamiques. 
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Introduction 

Pour gerer une galerie d' images, vous pouvez naturellement la travailler dans le scenario et 
jouer l'animation, mais il est preferable d'externaliser les contenus. D'abord, vous optimi- 
sez confortablement le poids de 1' application. Ensuite, vous en simplifiez la maintenance. 
Dans ce contexte de galerie d' images externalisees, il suffit alors de remplacer les visuels 
importes par d'autres du meme nom, pour automatiquement mettre a jour les images de 
T animation, sans avoir a reediter le Flash. 

Pour construire une galerie d' images, nous devons d'abord apprendre a charger ces images 
progressivement, puis, a organiser leur affichage en les appelant directement un repertoire 
externe, et en y associant des informations textuelles, telles que des titres ou des legendes. 
Pour ameliorer la gestion des contenus, nous verrons qu'il peut etre interessant de centrali- 
ser ces informations dans un fichier XML de sorte a simplifier la maintenance du projet une 
fois celui-ci publie. 

Nous aborderons aussi la maniere de rendre ces developpements plus pertinents, d'autoriser 
1' interaction sur chaque objet genere dynamiquement et d'associer a chaque image, un lien, 
une fonctionnalite de zoom ou toute autre action. 

La detection de bogues eventuels pouvant survenir suite a une erreur de chargement ou 
d' execution du programme, nous traiterons la maniere de placer des controles afin d'era- 
diquer les risques de plantage du programme. Enfin, nous evoquerons l'integration dyna- 
mique des donnees que vous pourriez extraire d'une base de type MySQL ou de tout 
autre systeme d' informations, grace a vos connaissances acquises sur la gestion d'un 
flux XML. 

Afficher des images externalisees et aleatoires 

Dans cette premiere section, nous abordons le chargement d'images externalisees. Cela 
nous permet d'alleger grandement le poids des documents SWF que nous creons. Nous 
abordons aussi la gestion de l'affichage d'une image avec le parametre random de sorte que 
l'animation publiee affiche un visuel ou un autre et ce, de maniere entierement aleatoire 
(voir Figure 5.1). 
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Figure 5.1 

Un des apercus 
du document a la 
publication. 




Exemples > ch5_galerieslmages_l .fla 

Dans la scene du document "ch5_galerielmages_l.fla", au-dessus du caique f ond_mc, appa- 
rait un caique masque nomme cible_mc (voir Figure 5.2). Ce caique affiche un symbole de 
type MovieClip du meme nom. Ce symbole est vide et sert de conteneur pour importer les 
images appelees dynamiquement par ActionScript. 



Figure 5.2 

Apercu du 
scenario de la 
scene principale. 
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Dans le caique nomme actions, nous pouvons lire le code suivant : 
// CHARGEMENT 

var chargeurFond : Loader = new Loader(); 

var valeurAleatoire : Number=Math . round (Math . random ( ) *2) ; 

var urlFond : URLRequest=new URLRequest ( " images/ coteBretonne/ photo "+valeur 

•» Aleatoire+" . j pg " ) ; 

chargeurFond. load(urlFond) ; 

// COMPLETE 

chargeurFond .contentLoaderlnfo.addEventListener (Event .COMPLETE, chargementCOMPLET) ; 
function chargementCOMPLET(evt:Event) { 
cible_mc . addChild (chargeurFond) ; 

} 

D'abord, une serie de variables initialise le chargement : 

var chargeurFond : Loader = new Loader(); 

La variable chargeurFond reserve l'emplacement memoire pour la definition d'un char- 
geur (: Loader). Le signe egal (=) affecte une valeur qui designe, ici, l'instanciation d'un 
nouvel objet Loader (= new Loader ()). 
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Plus loin, une variable de type nombre (valeurAleatoire) definit une valeur aleatoire 
comprise entre 0 et 2 inclus. Celle-ci est obtenue grace a la classe Math . random ( ) . La 
classe Math . round ( ) utilisee egalement permet d'arrondir la valeur obtenue a un chif- 
fre en tier. Pour combiner les deux methodes, nous imbriquons la premiere dans la 
seconde : 

var valeurAleatoire : Number=Math . round (Math . random ( ) *2) ; 

C'est cette valeur que nous recuperons plus tard et qui determinera l'image a charger. 



Generer une valeur aleatoire 

Pour generer une valeur aleatoire, nous utilisons la classe Math . random ( ) multipliee par une valeur. 
Cette valeur correspond au seuil limite (superieur) du nombre que Ton souhaite obtenir. Par exem- 
ple. Math . random ( ) *5 renvoie une valeur comprise entre 0 et 5. 

Mais attention, la valeur obtenue, meme multipliee, reste decimale, car en realite. Math . random( ) 
genere une valeur comprise entre 0,00... et 0,9999... En la multipliant, nous agrandissons done uni- 
quement les valeurs decimales en d'autres valeurs decimales, mais a une echelle plus grande. Par 
exemple, si Ton considere : 

Math.random()*5; 
et que la methode Math . random ( ) renvoie 0.7. Alors, nous obtenons : 

0,7 x 5 = 3,5 

Arrondir une valeur 

Pour obtenir un chiffre entier, nous utilisons Tune des methodes suivantes : 

■ Pour arrondir a rentier le plus proche, on utilise Math . round ( ) : Math, round (Math, random ( ) *5). 

■ Pour arrondir a rentier superieur le plus proche, on utilise Math, ceil () : Math, ceil (Math, ran- 
dom()*5). 

■ Pour arrondir a rentier inferieur le plus proche, on utilise Math.f loor( ) : Math, floor (Math . ran- 
dom ()*5). 

Ainsi, la methode Math . round, en dessous de 0 . 5, arrondit a 0, au dessus de 0 . 5, arrondit a 1 . La 
methode Math . ceil, de 0 . 01 a 0 . 9, arrondit a l , et la methode Math .floor, de 0 . 01 a 0 . 999, 
arrondit a 0... Testez par exemple ceci pour identifier clairement le resultat obtenu par chacune des 
trois methodes : 



trace( "floor" ) 

for (var i:Number=0;i<20;i++){ 

trace (Math .floor (Math . random ( ) *2) ) ; 

} 

trace( "round" ) 

for (var i:Number=0;i<20;i++){ 

trace (Math . round (Math . random ( ) *2) ) ; 

} 

trace( "ceil" ) 

for (var i:Number=0;i<20;i++){ 

trace (Math . ceil (Math . random ( ) *2) ) ; 
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Une fois la valeur aleatoire definie, une autre variable, urlFond, stocke le chemin d'acces a 
T image. L'image est localisee dans un dossier nomme "coteBretonne" situe dans le reper- 
toire "images" qui accompagne les documents Flash des exemples du livre : 

var urlFond : URLRequest=new URLRequest( "images/coteBretonne/ 
photo"+valeurAleatoire+" . j pg " ) ; 

Le nom de la photo appelee est construit de maniere dynamique. Nous concatenons a la 

volee notre valeur aleatoire entre la racine du nom et son extension (racine + valeur- 

Aleatoire + extension). Selon la valeur obtenue par la variable, le chemin enregistre pour le 

chargement de l'image sera "images/coteBretonne/photoO.jpg", "images/coteBretonne/ 

photol.jpg" ou "images/coteBretonne/photo2.jpg". 

Definir les chemins pour les requetes externes. Lorsque vous appelez un contenu situe a 
I'exterieur d'un document Flash (une image, un autre fichier SWF un flux XML, un son, une video, 
etc., sauf pour les classes .as qui sont compilees a la publication), il est important de determiner 
I'emplacement du contenu appele par rapport a I'emplacement de la page HTML qui execute le 
fichier Flash, et non par rapport au fichier Flash lui-meme. En effet, si le fichier Flash est enregistre 
dans un emplacement different de la page qui le contient, le chemin se referant a ce document 
Flash risque d'etre invalide. Considerez toujours que la page HTML qui execute le Flash modifie de 
ce fait la position relative de I'animation Flash, en la definissant par rapport a la page HTML elle- 
meme. 

Une fois le chemin defini pour le chargement de l'image, nous indiquons au chargeur 
(chargeurFond), a l'aide de la methode load, de charger cette image (urlFond). 

chargeurFond . load(urlFond) ; 

Plus loin, un ecouteur est attache au chargeur chargeurFond et appelle une fonction : 
// COMPLETE 

chargeurFond .content Loaderlnfo.addEventListener (Event. COMPLETE, chargementCOMPLET) ; 
function chargementCOMPLET(evt:Event) { 
cible_mc . addChild( chargeurFond) ; 

} 

L' ecouteur est attache a l'objet Loaderlnf o du chargeur et non directement au chargeur lui- 
meme. La propriete contentLoaderlnf o appartient en effet a l'objet Loader et permet d'y 
lire des informations relatives a la progression du chargement. Pour ajouter des instructions 
d'affichage suite au chargement, nous devons done introduire cet objet dans le gestionnaire 
d'evenements, ce qui donne : 

chargeurFond .contentLoaderlnf o. addEvent Listener 
(Event . COMPLETE , chargementCOMPLET) ; 

Lorsque le chargement est complet (Event . COMPLETE), e'est-a-dire lorsque l'image appelee 
avec la methode load est entierement chargee sur le poste client, l'ecouteur execute une 
fonction que nous avons ici nommee chargementCOMPLET : 

function chargementCOMPLET(evt : Event) { 
cible_mc . addChild (chargeurFond) ; 

} 
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Cette fonction affiche l'objet charge directement dans le MovieClip nomme cible_mc qui 
sert de conteneur (ou l'ajoute comme enfant a la liste d'afhchage), a l'aide de la methode 
addChild() : 

Cible_mc . addChild ( chargeurFond ) ; 

En affichant l'element charge dans un symbole de type MovieClip, nous lui faisons benefi- 
cier des proprietes afferentes aux MovieClip. L'objet importe peut done, par ce conteneur, 
etre anime et controle par ActionScript (position, effets de couleur, affichage, riltres, animations, 
etc.). 

Doit-on toujours placer un ecouteur sur un chargeur pour activer I'affichage d un 
contenu charge dynamiquement ? II est possible, lorsque vous realisez le document localement, 
de vous passer de I'ecouteur attache au chargeur et d'invoquer directement I'affichage (addChild) 
suite au chargement avec la methode load. Le fichier place localement est deja present sur votre 
poste et ne requiert pas, dans ce cas, d'etre prealablement telecharge avant d'etre affiche. II est affi- 
che directement, car il est deja disponible. Mais, pour tout contenu destine a une publication en 
ligne, pour un site done, il convient de passer par I'ecouteur qui assurera I'affichage seulement une 
fois le contenu entierement charge. Le cas echeant, les contenus appeles dynamiquement seraient 
consideres par le lecteur Flash comme inexistants au moment de I'execution des scripts attaches a ces 
objets, ce qui pourrait nuire a la bonne execution de votre programme. Pour placer une action alter- 
native en cas de probleme lie au chargement, consultez aussi la section consacree a la gestion des 
erreurs au chargement, en fin de chapitre. 

A retenir 

■ Pour optimiser le poids d'un document qui affiche des images de grande taille, il est souhaitable 
d'externaliser ces images a l'aide d'un chargeur. 

■ Les parametres du chargeur permettent de definir de maniere dynamique les contenus a charger. 
Nous pouvons de ce fait avoir recours a une variable aleatoire pour construire le chemin de char- 
gement. 

■ Pour appliquer une valeur aleatoire, nous utilisons la classe Math . random et nous arrondissons a un 
entier la valeur decimale obtenue avec les classes Math . round. Math . ceil ou Math . floor. 

■ Les chemins des elements charges dynamiquement sont relatifs aux pages qui contiennent I'animation 
Flash. 

■ II convient d'utiliser un ecouteur pour attendre la fin du chargement d'un contenu avant de I'afficher a 
defaut de quoi, I'application developpee pourrait ne pas fonctionner normalement. 



Realiser une jauge de chargement 

Lorsque le contenu charge dynamiquement est lourd (plus de 100 Ko), il est souhaitable de 
signaler la progression du chargement. Pour ce faire, nous utilisons une jauge signaletique 
afin d'avertir l'utilisateur que 1' absence d' affichage ne designe pas un bogue ou une erreur 
de sa part, mais qu'il faut attendre la fin du chargement pour en visualiser le contenu. 
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Dans cette section, nous ajoutons done une jauge de progression au chargement mis en 
oeuvre a la section precedente (voir Figure 5.3). 

Figure 5.3 '^■^■^■^■^■^■^■^■^■^■^■^■^■^■^■^■^■^■^■^■^■^■^■^■^■^■■■■■i 

Apercu 

de la jauge de 
chargement. 




Exemples > ch5_galerieslmages_2.fla 

Dans la scene du document "ch5_galerieslmages_2.fla", au-dessus du caique fondjnc, 
apparait un caique masque nomme cible_mc. Ce caique affiche le meme symbole 
cible_mc vide, observe precedemment. Au-dessus du masque figure un autre caique, 
chargement_mc, qui affiche une jauge de progression (voir Figure 5.4). A l'interieur de ce 
nouveau symbole, nous distinguons, clairement repartis vers les caiques (voir Figure 5.5), 
un autre symbole, barre_mc, qui contient une forme graphique rectangulaire et dont le cen- 
tre geometrique est positionne a gauche (pour que l'objet se deforme vers la droite, dans le 
sens de la lecture de la progression) (voir Figure 5.6), ainsi qu'un texte dynamique nomme 
pourcentage_txt. Les autres elements sont purement figuratifs. 



Figure 5.4 

Apercu du 
scenario de la 
scene principale. 
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Figure 5.5 

Apercu du scenario 
du symbole 
chargement_mc. 



Figure 5.6 

Apercu du symbole 
barrejnc dont le 
centre geometrique 
est situe a gauche. 

Dans le caique nomme actions, nous pouvons lire le code suivant : 
// CHARGEMENT 

var chargeurFond : Loader = new Loader(); 

var valeurAleatoire : Number=Math . round (Math . random ( ) *2) ; 

var urlFond : URLRequest=new URLRequest ( " images/ coteBretonne/ photo "+valeur 

|» Aleatoire+" . j pg " ) ; 

chargeurFond. load(urlFond) ; 

// PROGRESSION 

chargeurFond . con tent Loader Info. addE vent Listener (ProgressE vent . PROGRESS, 

chargementENCOURS) ; 
function chargementENCOURS(evt:ProgressEvent) { 

var valeurPourcentage: Number = (evt . currentTarget . bytesLoaded / evt. current 

* Target . bytesTotal) ; 

chargement _mc . bar re _mc . scaleX= valeurPourcentage ; 

chargement_mc . pourcentage_txt . text= (Math . ceil ( valeurPourcentage* 1 00) )+"%"; 

} 

// COMPLETE 

chargeurFond . contentLoaderlnf o . addEventListener (Event . COMPLETE , chargementCOMPLET) ; 
function chargementCOMPLET(evt:Event) { 

cible_mc . addChild (chargeurFond ) ; 

chargementjnc . visible=f alse ; 

} 

Comme a la section precedente, nous retrouvons d'abord les variables qui activent le char- 
gement. Ensuite, deux ecouteurs sont attaches a la meme propriete contentLoaderlnf o. 

Le premier ecouteur execute une fonction durant la progression du chargement (PROGRESS), 
alors que le second en execute une autre une fois ce chargement termine (COMPLETE). Revenons 
sur le premier ecouteur : 

chargeurFond .contentLoaderlnf o. addEventListener (ProgressE vent .PROGRESS, 

chargementENCOURS) ; 

Dans le gestionnaire d'evenements, nous pouvons lire ProgressEvent et non simplement 
Event. Seule la classe ProgressEvent permet de disposer de l'evenement PROGRESS qui 
designe la periode durant laquelle le chargement s'effectue et autorise, seul, l'execution 
d'une fonction pendant ce chargement. 
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La fonction appelee pendant le chargement est chargementENCOURS : 

function chargementENCOURS(evt:ProgressEvent) { 

var valeurPourcentage:Number = (evt.currentTarget.bytesLoaded / evt. current 
Target . bytesTotal) ; 

chargement_mc . barre_mc . scaleX=valeurPourcentage; 

chargement_mc . pourcentage_txt . text=(Math . ceil (valeurPourcent age* 100) )+"%"; 

} 

Dans cette fonction, nous commencons par definir une variable de type nombre qui enregis- 
tre une valeur correspondant a la progression du chargement. Cette valeur decimale est 
comprise entre 0 (0 % de progression) et 1 (100 % de progression). Elle est determinee en 
calculant, pour l'objet en cours de chargement (evt . currentTarget), le nombre de bytes 
deja charges divise par le nombre de bytes total a charger. 

Par exemple, si le fichier pese 60 Ko (61 440 bytes) et que 15 Ko sont actuellement charges 
(15 360 bytes), le pourcentage du chargement effectue est de 15 630/61 440, soit 0,25 
(ou 25 %). Lorsque le chargement sera termine, la valeur sera de 61 440/61 440, soit 1. 

Suite a cela, la variable valeu rPou rcentage est utilisee pour definir l'echelle de deformation en 
X sur l'objet barre_mc qui represente la jauge de progression du symbole chargement_mc : 

chargementjnc . barrejnc .scaleX=valeurPourcentage; 

Plus loin, dans la meme fonction, une autre instruction utilise cette valeur pour definir le 
texte a afficher dans le champ dynamique nomme pourcentage_txt, situe a l'interieur du 
symbole chargementjnc : 

chargementjnc . pou rcent age jtxt .text= (Math. ceil (valeur Pourcentage* 100) ) + "%" ; 

Le texte resulte de la variable valeur Pourcentage augmentee et arrondie. Nous concate- 
nons, avec le signe plus (+), le caractere pourcentage (%) pour que le chiffre obtenu soit 
accompagne a l'ecran de cette unite de valeur. 

Lorsque le chargement atteint la valeur de 100, le texte affiche done 100 %, le symbole 
barre_mc retrouve son echelle initiale et la fonction chargementCOMPLET est alors executee : 

// COMPLETE 

chargeurFond . contentLoaderlnf o . addEventListener ( Event . COMPLETE , chargementCOMPLET) ; 
function chargementCOMPLET(evt:Event) { 

cible_mc . addChild (chargeurFond ) ; 

chargementjnc . visible=f alse ; 

} 

Dans cette fonction, en plus d'afficher le contenu charge avec addChild, nous rendons invi- 
sible le symbole chargementjnc. 

En publiant le document localement sur votre ordinateur, vous ne visualisez probablement 
pas la progression du chargement, car le fichier appele est deja present sur votre poste et ne 
requiert done aucune attente pour etre affiche. Pour mieux vous rendre compte de l'effica- 
cite de la jauge de chargement, dans le menu Affichage situe en haut de votre ecran et dis- 
ponible lors de la publication du document (Cmd+Entree pour Mac ou Ctrl+Entree pour 
Windows), activez l'option Simuler le telechargement. Si le reglage de la bande passante est 
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correctement configure, vous pourrez alors visualiser la progression du chargement comme 
si le fichier etait en ligne. 



A retenir 

■ Pour creer une jauge de chargement, nous utilisons contentLoaderlnf o, une propriete specifique 
associee a la classe ProgressEvent. 

■ La valeur obtenue pour determiner la progression du chargement peut etre distribute a travers dif- 
ferentes proprietes pour redimensionner un symbole (jauge) ou modifier la valeur d'un texte (pour- 
centage), par exemple. 

■ Lorsque le chargement est termine, nous affichons le contenu charge et nous masquons la jauge de 
chargement. 

■ Pour animer I'echelle du symbole qui sert de jauge, il faut bien definir I'emplacement de son centre 
geometrique de maniere a I'etirer correctement. 



Realiser une galerie d'images externalisees 

Pour realiser une galerie d'images a I'aide d'ActionScript, nous utilisons un chargeur. A 
chaque iteration appelee en activant un bouton suivant ou retour, nous remplacons l'image 
chargee par une nouvelle. Pour que la gestion de ce dispositif reste simple, nous organisons 
les fichiers et leurs noms de sorte que le processus puisse etre facilement automatise. Ainsi, 
si nous rassemblons les images de la galerie dans un meme repertoire, et que nous nommons 
ces images avec des numeros correspondant respectivement a leur ordre d' apparition, et en 
commencant par zero, il nous suffit alors d'appeler chaque image en incrementant ou en dimi- 
nuant une valeur passee en parametre de l'URL d'un chargeur de contenu. Nous pouvons aussi 
utiliser cette valeur pour renseigner l'internaute sur le numero d'image en cours d'affichage, 
par exemple. C'est ce que nous presentons dans cette section (voir Figure 5.7). 



Figure 5.7 

Apercu 

de la galerie a la 
publication. 
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Exemples > ch5_galerieslmages_3.fla 

Dans la scene principale du document "ch5_galerieslmages_3.fla", au-dessus du caique 
f ond_mc, apparait le symbole cible_mc. II est vide et sert de conteneur pour les images de 
la galerie (voir Figure 5.8). Ce symbole possede deja des proprietes, telles que l'application 
d'un nitre d'ombre portee. Nous retrouvons la jauge de chargement presentee a la section 
precedente, puis deux boutons (retour_btn et suivant_btn) qui servent a appeler les nou- 
velles images. Au-dessus, deux champs de texte dynamiques permettent d'inscrire pour 
chaque photo, un titre et une legende en fonction des iterations. Enfin, deux filets soulignent 
la composition, mais ne sont pas impliques dans les actions. 



Figure 5.8 

Apercu 

du scenario de la 
scene principale. 




A l'interieur de notre dossier de travail, le repertoire "images" contient un sous-repertoire 
nomme "galerie". Celui-ci contient 7 images respectivement nominees photo0.jpg, 
photol.jpg, photo2.jpg, etc., de largeurs differentes (voir Figure 5.9). 



Figure 5.9 

Apercu 
des images 
externalisees 
de la galerie. 
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Dans le caique nomme actions, nous pouvons lire le code suivant : 
// Chargement initial 

// CHARGEMENT 

var chargeurPhoto : Loader= new Loader(); 

var cheminPhoto :URLRequest=new URLRequest ( " images/ galerie / photoO. j pg " ) ; 

chargeurPhoto . load (cheminPhoto) ; 

// PROGRESSION 

chargeurPhoto . content Loader Info . addE vent Listener (ProgressEvent . PROGRESS, 
>» chargementENCOURS) ; 

function chargementENCOURS(evt:ProgressEvent) { 
chargementmc . visible=t rue ; 

var valeurPourcentage : Number = (evt . currentTarget . bytesLoaded / 

evt . currentTarget . bytesTotal) ; 
chargementjnc . barre_mc . scaleX=valeurPourcentage; 
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chargement_mc . pourcentage_txt . text=(Math . ceil (valeurPourcent age* 100) )+"%"; 

} 

// COMPLETE 

chargeurPhoto . contentLoaderlnf o . addEventListener ( Event . COMPLETE, chargementCOMPLETI ) ; 
function chargementCOMPLETI (evt:Event) { 

cible_mc . addChild (chargeurPhoto) ; 

chargement_mc . visible=f alse; 

cible_mc. x=( stage. stageWidth/2) - (cible_mc. width/2) ; 
ciblemc. y=( stage. stageHeight/2) - (cible_mc. height/ 2) -25; 

} 

// Boutons de navigation 

var i:Number=0; 
var nombreDePhotos:Number=7; 
titre_txt.text="Galerie Photo" ; 
index_txt.text="Les marais salants de Guerande"; 

// Bouton SUIVANT 

suivant_btn. addEventListener (MouseE vent .CLICK, af f icherPhotoSuivante) ; 

function aff icherPhotoSuivante (Event :MouseEvent) { 
i++; 

if (i>=nombreDePhotos) { 
i=0; 

} 

chargerPhoto( ) ; 

} 

// Bouton RETOUR 

retour_bt n. addEventListener (MouseE vent .CLICK, aff icherPhotoRetour) ; 

function aff icherPhotoRetour (Event :MouseEvent) { 
i— ; 

if (i<0) { 

i=nombreDePhotos-1 ; 

} 

chargerPhoto( ) ; 

} 

function chargerPhoto () { 

var cheminPhoto:URLRequest=new URLRequest("images/galerie/photo"+i+" . jpg") ; 
chargeurPhoto. load (cheminPhoto) ; 
index_txt.text=" Photo N° "+i; 

} 

La premiere partie de ce code reprend essentiellement le chargement initial d'une image, 
que nous avons aborde precedemment. L'URL cible simplement un nouveau dossier et affiche la 
premiere image de la serie, nommee "photo0.jpg" : 

var cheminPhoto :URLRequest=new URLRequest ( " images /galerie/photoO. jpg" ) ; 

Dans le gestionnaire PROGRESS, nous reactivons l'affichage de la jauge de sorte qu'elle 
puisse reapparaitre aussi pour les images suivantes : 

chargement_mc . visible=t rue ; 
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Enfin, une fois le chargement complet, nous redefinissons le positionnement du symbole 
conteneur cible_mc en X et Y. Dans notre contexte, cela permet de recentrer l'image dans 
la page quelle que soit sa largeur. Pour ce faire, nous specirions, dans le premier groupe de 
parentheses, que la position du conteneur correspond a la largeur de la fenetre du document 
Flash, divisee par 2. Puis, nous retranchons, dans le deuxieme groupe de parentheses, la lar- 
geur du conteneur lui-meme, divisee aussi par 2. Si nous ne divisions pas par 2, la cible 
serait collee a droite de la limite du document, car la valeur alors prise en compte pour caler 
l'objet serait la largeur de la scene moins celle de l'objet. En divisant par 2 chacune d'entre 
elles, puisque la moitie d'une largeur equivaut a son centre, nous centrons ce conteneur dans 
le document (voir Figure 5.10) : 

cible_mc .x=( stage. stageWidth/2) - (cible_mc. width /2) ; 




Notez que ce calcul ne peut se faire qu'a partir du moment oil les dimensions de cible_mc 
sont connues, c'est-a-dire, uniquement lorsqu'une photo y est chargee. A defaut, c'est sa 
dimension initiale qui sera lue, soit 0 pixel de large. La position d'un conteneur est determi- 
nee par rapport a son centre geometrique, toujours cale en haut et a gauche dans le cas d'un 
chargement dynamique. Elle serait effectivement decalee de la moitie de la largeur de 
l'image importee, si nous l'appliquions avant le chargement de l'image. 

Le principe est decline pour le positionnement vertical, en Y, avec toutefois un decalage de 
-25 pixels, pour rehausser le conteneur vers le sommet du document : 

cible_mc.y=( stage. stageHeight/2)-(cible_mc. height 12) -25; 

Centrer les images avec le composant UILoader. II est possible de centrer les images chargees 
dynamiquement sans avoir a calculer leur position. Remplacez simplement le conteneur MovieClip 
ciblejnc que nous utilisons dans cet exemple par un composant UILoader. Ce composant est dis- 
ponible depuis la fenetre des composants (Fenetre > Composants), dans le groupe de composants 
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nomme "User Interface". Pour plus conformations sur ce composant, reportez-vous a I'aide de Flash 
(Fl) et saisissez dans le moteur de recherche de I'aide, le terme UILoader ou bien consultez directe- 
ment I'URL de la notice de ce composant a cette adresse : http://help.adobe.com/fr_FR/Action- 
Script/3.0 UsingComponentsAS3/WS5b3ccc51 6d4fbf351 e63e3d1 1 8a9c65b32-7f9d.html. 



Plus loin dans le code, au niveau du commentaire Boutons de navigation, nous initialisons 
quelques valeurs : 

// Boutons de navigation 

var i:Number=0; 
var nombreDePhotos:Number=7; 
titre_txt.text="Galerie Photo" ; 
index_txt.text="Les marais salants de Guerande"; 

En premier lieu, i designe un nombre de valeur 0. A chaque clic sur le bouton suivant ou 
retour, nous incrementons ou diminuons cette valeur de sorte qu'elle designe, dans la liste 
des images, l'image correspondant a la valeur appelee. Pour demarrer, cette valeur est initia- 
lisee a 0 et designe l'image "photo0.jpg". A chaque clic, cette valeur est done modifiee. 
Lorsque la valeur atteint le seuil correspondant a la derniere image de la serie, nous 1' initia- 
lisons a 0, pour redemarrer la boucle. Inversement, lorsque le bouton retour appelle l'image 
qui precede la premiere image de la serie, la boucle renvoie la valeur qui correspond a la der- 
niere image (i=nombreDephotos-1). Nous retranchons 1 a la valeur nombreDePhotos : la 
boucle demarrant a 0, si nous conservions la valeur initiale, nous obtiendrions une iteration de 
trop en regard du nombre d'images disponibles, ce qui provoquerait une erreur d'afhehage. 

La deuxieme variable nombreDePhotos indique le nombre de photos disponibles dans la 
galerie. Vous devez renseigner cette valeur manuellement. Nous verrons, en abordant le XML, 
que cette valeur peut etre renseignee automatiquement. Actuellement, nous comptons 7 
photos. 

Enfin, nous initialisons les textes des champs dynamiques titre_txt et index_txt distri- 
bues sur la scene. Pour chaque bouton, nous ajoutons a present un ecouteur et une fonction : 

// Bouton SUIVANT 

suivant_btn . addEventListener (MouseEvent . CLICK, aff icherPhotoSuivante) ; 

Le bouton suivant_btn appelle la fonction af f icherPhotoSuivant : 

function aff icherPhotoSuivante (Event : MouseEvent ) { 
i++; 

if (i>=nombreDePhotos) { 
i=0; 

} 

chargerPhoto( ) ; 

} 

La fonction commence par incrementer la valeur i (i++) prealablement initialisee a 0. La 
valeur i devient done 1, au premier clic, puis 2 au second clic et ainsi de suite. 

Ensuite, nous indiquons que si la valeur de i depasse le nombre de photos disponibles 
(i>nombreDePhotos), nous la reinitialisons a 0. Ainsi, lorsque la boucle est terminee, e'est 
la premiere image qui est a nouveau affichee et la boucle peut continuer d'etre incremented 
jusqu'a ce que la condition l'initialise de nouveau, et ainsi de suite. 
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A la fin du bloc d' instruction du premier bouton, nous faisons reference a une fonction 
developpee plus loin (chargerPhoto). Nous y revenons. 

Nous identifions ensuite une nouvelle fonction (af f icherPhotoRetour) declinaison de 
cette meme fonction pour le bouton de retour : 

// Bouton RETOUR 

retour_btn . addE vent List ener (MouseE vent . CLICK, aff icherPhotoRetour) ; 
function aff icherPhotoRetour(Event :MouseEvent) { 

i— ; 

if (i<0) { 

i=nombreDePhotos-1 ; 

} 

chargerPhoto( ) ; 

} 

Dans la fonction aff icherPhotoRetour, nous inversons le sens de 1' incrementation en 
remplacant les signes plus par moins (i--). La valeur ainsi diminue de 1 a chaque iteration. 
Puis, si cette valeur atteint le seuil limite qui correspond a la premiere image (0), alors, nous 
l'initialisons a la valeur de la variable nombreDePhotos de sorte que 1' animation boucle a 
nouveau sur elle-meme. 

A la fin du programme, nous placons une fonction autonome qui rassemble les instructions 
communes appelees par les deux boutons. Cela permet de simplifier le codage du projet en 
evitant les actions redondantes. De plus, cela facilitera la maintenance : 

function chargerPhoto () { 

var cheminPhoto:URLRequest=new URLRequest("images/galerie/photo"+i+" . jpg") ; 

chargeurPhoto . load (cheminPhoto) ; 
index_txt.text="Photo N* "+i; 

} 

La fonction chargerPhoto ( ) lance le chargement de l'image et modifie la valeur du champ 
de texte dynamique en fonction de la valeur de l'image chargee, definie par i. 

Plus precisement, nous redefinissons l'URL cheminPhoto appelee par le chargeur du 
depart, nomme chargeurPhoto. Nous utilisons la valeur de i pour determiner le numero de 
l'image a afficher, en integrant cette valeur au sein de la chaine de caracteres de l'URL. II 
est necessaire, pour le bon fonctionnement du programme, que les images stockees dans le 
repertoire possedent la meme racine de nom (photo), et que la premiere d'entre elle se termine 
par le numero 0 qui correspond a la premiere valeur de i. 



Lord re numerique en ActionScript 

En ActionScript, la valeur du premier niveau de toute chaine demarre toujours a 0. Un objet affiche 
sur la scene sera accessible avec getChildAt(O). Le premier noeud d'un fichier XML sera appele 
avec documentXML.childNodes[0]. Le premier element d'un tableau sera accessible avec nomDu- 
Tableau [ 0 ] , et ainsi de suite. Pour homogeneiser les actions et simplifier la gestion d'actions repeti- 
tives, nous gerons aussi les images en associant au nom, de la premiere d'entre elles, la valeur 0. II 
est alors plus simple de gerer les images en associant leur nom a une variable decrementation, 
comme i, qui peut en meme temps affecter d'autres methodes ou conteneurs. 
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Nous rappelons alors le chargeur (chargementphoto.load(cheminPhoto)) afin qu'il 
relance le chargement a partir de l'URL nouvellement designee. 

II n'est pas necessaire de rappeler la methode addChild car l'objet chargeurPhoto est deja 
present dans la liste d'affichage (done sur la scene), grace au premier addChild invoque 
lors du chargement de la premiere image. De meme, il est inutile de relancer les ecouteurs 
pour les evenements PROGRESS et COMPLETE qui demeurent toujours actifs tant que nous ne 
les avons pas neutralises a l'aide de la methode removeEventListener. 

En publiant la galerie sur un serveur distant, vous remarquerez que la jauge reapparait pour 
chaque nouveau chargement parce que nous avons reactive la propriete visible sur true a 
1' execution du chargement. De meme, la jauge disparait lorsque vous affichez une deuxieme 
fois chaque image, car celles-ci sont maintenant chargees dans le cache de votre navigateur. 
Leur chargement devient done instantane. 

Enfin, toujours dans cette fonction, nous modifions le contenu du champ de texte dynami- 
que index_txt en y inscrivant le numero de la photo chargee, selon le meme principe que 
pour la definition de l'URL. 

A retenir 

■ II est possible de realiser une galerie dynamique d'images en jouant sur la maniere de nommer les 
fichiers appeles. Par exemple, en mixant une racine commune avec un nombre qui reflete I'ordre 
d'apparition. 

■ Pour appeler differents contenus externalises ou modifier des valeurs, nous pouvons utiliser une 
variable de type nombre qu'il suffit d'incrementer a chaque iteration pour generer de nouvelles 
valeurs. 

■ Un gestionnaire d'evenements est toujours actif tant que celui-ci n'a pas ete neutralise par la 
methode removeEventListener. 

■ II est possible de centrer une image chargee dynamiquement en calculant sa position par rapport 
aux dimensions de la fenetre du document Flash (stage) ou en utilisant le composant UlLLoader. 



Realiser une galerie d'images avec XML 

Le recours a un fichier XML, pour le developpement d'une galerie photo comme nous le 
proposons ici, permet de centraliser les informations rattachees a chaque visuel dans un seul 
document, editable au format texte, et de ne plus avoir a publier a nouveau le document 
Flash lorsqu'une donnee est modifiee. 

La gestion d'une animation Flash avec un flux XML vous permet aussi de travailler plus 
facilement en equipe avec un developpeur back-office par exemple (qui gere des systemes 
de gestion de contenu cote serveur, avec les langages PHP/MySQL par exemple, et peut 
rendre facilement disponibles ses requetes sous la forme de flux XML). 

La structure d'un document XML autorise enfin d'associer, pour chacun des elements, un 
nombre indetermine de donnees, sans avoir a les traiter toutes systematiquement. 
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Dans cette section, nous presentons une galerie photo associee a un fichier XML contenant 
les references aux images, les titres ainsi qu'une legende pour chacune d'entre elles. En cli- 
quant sur les boutons suivant et retour, nous evoluons directement au coeur de l'arbores- 
cence du fichier XML alors importe (voir Figure 5.1 1). 




Exemples > ch5_galerieslmages_4-fla 

Dans la scene principale du document "ch5_galerieslmages_4.fla", au-dessus du caique 
f ond_mc, apparait le meme symbole ciblejnc vide, qui sert de conteneur pour les images 
de la galerie. Les autres elements sont similaires. Deux champs de texte dynamiques 
titre_txt et legende_txt sont distribues de part et d'autre de la zone d'affichage 
cible_mc. Deux boutons suivant_btn et retour_btn permettent de controler la naviga- 
tion. Enrin, le chargeur developpe en debut de chapitre demeure present et reste egalement 
actif pour chaque nouvelle entree appelee (voir Figure 5.12). 



Figure 5.12 
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Dans le caique nomme actions, nous pouvons lire le code suivant : 

// Chargement initial PHOTO AGRANDIE 

// CHARGEMENT 

var chargeurPhoto : Loader= new Loader(); 

var cheminPhoto:URLRequest=new URLRequest( "images/galerie/photoO. jpg" ) ; 
chargeurPhoto . load (cheminPhoto) ; 

// PROGRESSION 

chargeurPhoto . content Loader Info . addE vent Listener (ProgressEvent . PROGRESS, 

chargementENCOURS) ; 
function chargementENCOURS(evt:ProgressEvent) { 
chargement_mc . visible=true ; 

var valeurPourcentage : Number = (evt . currentTarget . bytesLoaded / evt. current 
* Target . bytesTotal) ; 

chargementjnc . barrejnc . scaleX=valeurPourcentage; 

chargementjnc . pourcentage_txt . text=(Math . ceil (valeurPourcentage* 100) )+"%"; 



// COMPLETE 

chargeurPhoto . contentLoaderlnf o . addEventListener ( Event . COMPLETE , chargementCOMPLETI ) ; 
function chargementCOMPLETI (evt:Event) { 

ciblejnc . addChild (chargeurPhoto) ; 

chargementjnc . visible=f alse; 

ciblejnc . x=stage . stageWidth/2-ciblejnc .width/2; 
ciblejnc . y=stage . stageHeight/ 2- ciblejnc . height/ 2-25; 

} 

// Chargement du XML 

var i:Number=0; 

var chargeurXML:URLLoader = new URLLoader(); 
chargeurXML.load(new URLRequest( "xml/galerie . xml" ) ) ; 
chargeurXML .addEventListener (Event. COMPLETE , XMLComplet) ; 

function XMLComplet(evt:Event){ 

var donneesXML:XML=new XML(evt. target. data) ; 

var NombreDeNoeudsDansLeXML : Number=donneesXML . photo . length ( ) ; 

// RETOUR 

retourjotn . addEventListener (MouseEvent .M0USE_D0WN, retourDOWN) ; 
function retourDOWN(evt:MouseEvent) { 

i-- ; 

if (i<0) { 

i=NombreDeNoeudsDansLeXML-1 ; 

} 

distribuerValeurs ( ) ; 

} 

// SUIVANT 

suivantjDtn . addEventListener(MouseEvent . CLICK, suivant) ; 
function suivant(evt:MouseEvent) { 



LE CAMPUS 



ActionScript 3 ET motion design 



i++; 

if (i==NombreDeNoeudsDansLeXML) { 
i=0; 

} 

distribuerValeurs ( ) ; 

} 

function distribuerValeurs () { 

titre_txt . htmlText=donneesXML . photo [i] . tit re . toString ( ) ; / / tit re 
legende_txt.htmlText=donneesXML.photo[i] .legende.toString() ; // legende 
cheminPhoto=new URLRequest(donneesXML.photo[i] . image. toString( ) ) ; 
*»// image agrandie 
chargeurPhoto . load (cheminPhoto) ; 

} 

} 

Pour comprendre le principe de la gestion d'un flux XML, nous devons retenir l'idee que les 
donnees centralisees dans le fichier XML ne peuvent etre distributes dans le Flash qu'une 
fois le XML entierement charge. C'est pourquoi nous mettons les contenus en forme suite a 
l'evenement COMPLETE. 

Pour traiter les donnees issues d'un fichier XML, nous disposons alors de deux methodes. 
Soit nous utilisons directement les valeurs chargees par le XML au sein de la fonction liee 
au chargement du XML. Soit nous creons des variables globales, c'est-a-dire que nous les 
typons en dehors de toute fonction, pour en modifier ensuite les valeurs avec les donnees du 
XML importe. Dans ce cas, nous pouvons exploiter les valeurs modifiees par le XML 
depuis toute autre fonction presente dans notre programme. 

Dans cet ouvrage, nous abordons la premiere methode. Pour la seconde, nous vous invitons 
a consulter des publications plus specialisees sur l'interfacage dynamique, comme le livre 
tres pointu de Thibault Imbert (ed. Pearson) ou 1' ouvrage plus accessible d' Anne Tasso (ed. 
Eyrolles). Nous fournissons les references completes de ces deux livres en fin d'ouvrage. 

Dans ce document, nous chargeons le fichier XML relatif a la galerie, qui comporte la struc- 
ture suivante : 

<?xml version = '1.0' encoding="utf-8" ?> 
<galerie> 
<photo> 

<titre>GUERANDE</titre> 

<legende>Sol craquele</legende> 

<image>images/ galerie /phot 00 . j pg</image> 

<vignette>images/ galerie /vignettes /phot 00- vignette . j pg</vignette> 
</photo> 
<photo> 

<titre>GUERANDE</titre> 

<legende>Gorgue, canal amenant l'eau chargee en sel dans les tables salantes 
*■* </legende> 

<image>images/ galerie/ phot o1 . j pg</image> 

<vignette>images /galerie /vignettes/ phot o1 -vignette . j pg</vignette> 
</photo> 
<photo> 

<titre>GUERANDE</titre> 

<legende>Amas de sel</legende> 

<image>images/ galerie/ phot o2 . j pg</image> 

<vignette>images /galerie /vignettes/ phot o2- vignette . j pg</vignette> 
</photo> 
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<photo> 

<titre>GUERANDE</titre> 
<legende>Cristallisoir</legende> 
<image>images/ gale rie/ phot o3 . j pg</image> 

<vignett e>images/ galerie /vignettes/ phot o3- vignette . j pg</vignette> 
</photo> 
<photo> 

<titre>GUERANDE</titre> 

<legende>Saliculture</legende> 

<image>images/ gale rie/ phot 04 . j pg</image> 

<vignette>images /galerie /vignettes/ phot 04- vignette . j pg</vignette> 
</photo> 
<photo> 

<titre>GUERANDE</titre> 

<legende>Rammasage du sel</legende> 

<image>images/ gale rie /photo5 . j pg</image> 

<vignette>images/galerie/ vignettes /phot 05- vignette . j pg</vignette> 
</photo> 
<photo> 

<titre>GUERANDE</titre> 

<legende>Outils du paludier</legende> 

<image>images/ gale rie /photo6. j pg</image> 

<vignette>images/galerie /vignettes/ phot 06- vignette . j pg</vignette> 
</photo> 
</galerie> 

Ce document comporte une structure classique composee d'un nceud principal appele ici 
galerie. Cette structure affiche autant de nceuds nommes photo qu'il y a d'images a integrer 
dans notre galerie. Chaque noeud photo, a son tour, dispose d'entrees respectivement nom- 
inees tit re, legende, image et vignette, vehiculant chacune une valeur que nous distri- 
buons, avec ActionScript, dans les objets mis en scene dans le document Flash. Dans cette 
section, nous utilisons uniquement les trois premiers elements de chaque nceud. Le qua- 
trieme, vignette, est deployee dans la section suivante. 



Creer un fichier XML. Pour creer un fichier XML, utilisez n'importe quel editeur de texte et enregis- 
trez le code au format texte avec I'extension xml. Puis, dans la premiere ligne, specifiez un encodage 
de type UTF-8 pour eviter les problemes d'accents mal interpreter si vous editez depuis un Macin- 
tosh : sur Mac, les fichiers texte sont nativement codes en ISO Mac. Vous devez done enregistrer le 
texte avec une option qui permette d'exporter en UTF-8. ^instruction ajoutee dans le code affiche 
done : 

<?xml version = '1.8' encoding="utf-8" ?> 

Dans la suite Adobe, Dreamweaver permet de realiser facilement des documents XML clairement 
indentes et propose des assistants a la saisie. Pour plus d'informations sur la structure d'un fichier 
XML, consultez les ouvrages de Howard Goldberg ou Florent Nolot aux editions Pearson. 

Dans le Flash, depuis la fenetre Actions, nous activons le chargement d'une premiere image 
dans la zone cible, comme vu precedemment : 

// Chargement initial PHOTO AGRANDIE 

// CHARGEMENT 

var chargeurPhoto : Loader= new Loader(); 
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var cheminPhoto:URLRequest=new URLRequest( "images/galerie/photoO. jpg" ) ; 
chargeurPhoto . load (cheminPhoto) ; 

// PROGRESSION 

chargeurPhoto . content Loader Info . addE vent Listener (ProgressEvent . PROGRESS, 
*» chargementENCOURS) ; 

function chargementENCOURS(evt:ProgressEvent) { 
chargement_mc . visible=true ; 

var valeurPourcentage : Number = (evt . currentTarget . bytesLoaded / 

*» evt . currentTarget . bytesTotal) ; 

chargement_mc . barrejnc . scaleX=valeurPourcentage; 

chargement_mc . pourcentage_txt . text=(Math . ceil (valeurPourcentage* 100) )+"%"; 

} 

// COMPLETE 

chargeurPhoto . contentLoaderlnf o . addEventListener ( Event . COMPLETE , chargementCOMPLETI ) ; 
function chargementCOMPLETI (evt:Event) { 

cible_mc . addChild (chargeurPhoto) ; 

chargementjnc . visible=f alse; 

cible_mc . x=stage . stageWidth/2-cible_mc .width/2; 
cible_mc . y=stage . stageHeight/2-cible_mc . height/ 2-25; 

} 

Ensuite, nous activons la gestion du flux XML a partir duquel nous allons definir les conso- 
les de navigation sur les boutons suivant et retour : 

// Chargement du XML 

var i:Number=0; 

var ecartEntreVignettes : Number=90; 

var chargeurXML:URLLoader = new URLLoader(); 
hargeurXML.load(new URLRequest( "xml/galerie.xml" ) ) ; 
chargeurXML . addEventListener (Event .COMPLETE , XMLComplet) ; 

function XMLComplet (evt: Event) { 

// gestion des donnees XML 

} 

Avant de charger le fichier XML, nous initialisons un nombre i, qui permet de memoriser 
l'ordre d'affichage de 1' image courante. Cette valeur est initialisee a 0, ce qui correspond de 
nouveau a 1' image chargee par defaut, "photo0.jpg". 

Puis, nous importons le fichier XML. Pour ce faire, nous declarons d'abord un nouveau 
chargeur (chargeurXML), en utilisant cette fois une instance de la classe URLLoader, comme 
nous le ferions pour importer une image. Ce chargeur active le chargement d'un fichier 
defini a travers l'objet URLRequest, passe directement en parametre de la methode load ( ) . 
Cela equivaut a definir l'URL separement avec var monChemin :URLRequest=new URL- 
Request ( "monURL" ). Les deux methodes conviennent. 
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Difference entre Loader et URLLoader. La classe Loader est utilisee pour charger un fichier 
image ou SWF Tandis que la classe URLLoader est employee pour charger un fichier au format 
texte. La classe URLLoader est done la methode qu'il faut utiliser pour la gestion de donnees 
dynamiques. 



Le chargeur chargeurXML est associe a un ecouteur (avec Taction addEventListener) qui, 
a travers la classe Event et l'evenement COMPLETE, appelle la fonction nommee XMLComplet 
une fois le chargement effectue. 

A l'interieur de cette fonction, nous creons une variable donneesXML qui enregistre 
l'ensemble de l'arbre XML importe. Cela permettra, par la suite, de s'y referer aisement en 
invoquant cet objet pour distribuer chaque donnee qu'il vehicule, plus loin dans le code. 

L'objet cree est un objet de type XML. II se refere a la classe Event active, via l'identifiant 
evt, et y cible les donnees courantes (target .data), donnees alors aspirees par l'ecouteur 
auquel cette classe se rattache. 

function XMLComplet(evt:Event) { 

var donneesXML:XML=new XML(evt. target. data) ; 

var NombreDeNoeudsDansLeXML : Number=donneesXML . photo . length ( ) ; 

} 

Enfin, nous declarons une premiere valeur a partir de l'objet XML que nous venons de 
creer, pour identifier le nombre de nceuds disponibles dans ce fichier. Pour cela, nous nous 
referons a l'objet XML avec donnesXML. Puis, nous specifions le nom du nceud de premier 
niveau (photo) et detectons la longueur (la quantite de nceuds) presente dans le document, 
grace a la methode length ( ) . 

Lire le XML. Pour lire les donnees contenues dans un fichier XML, selon le type de donnees relevees, 
procedez comme suit : 

■ Pour atteindre un noeud precis, dont vous connaissez I'ordre d'apparition, passez son numero entre 
crochets, comme ceci : donneesXML. photo [numeroDuNoeud] .toString( ) . L'ordre d'affichage des 
nceuds dans I'arborescence du fichier XML demarre toujours a la valeur 0. Pour atteindre le premier 
nceud, nous inscrivons nomDuXML.nomDuNoeuds[0] . 

■ Si la structure comporte plusieurs nceuds imbriques, ciblez chaque niveau individuellement, comme 
ceci : 

donneesXML . photo [ numeroDuNoeud ] . image [ numeroDuNoeudDeSecondNiveau ] toString ( ) ; 

■ Si le nceud porte la structure suivante : <photo largeur="600" hauteur="450"> 
<image>images/photo0. jpg</image> </photo>, pour cibler la valeur contenue dans I'attribut 
largeur, utillsez la syntaxe donneesXML. photo[numeroDuNoeud] .@largeur.toString( ) . 

■ Si le nceud porte cette structure-ci : <photo largeur="600" hauteur="450"> <image>images/ 
photo0. j pg</image> </photo>, pour cibler la valeur contenue entre les balises <image> et 
</image>, utilisez la syntaxe donneesXML. photo[numeroDuNoeud] .image. toString() . 
Attention toutefois, toute XMLListe se comporte comme un XML si elle ne contient qu'un seul 
element. Dans le cas contraire, il faudrait ecrire donneesXML. photo[numero- 
DuNoeud] .image[0] .toString(). 

■ Si le nceud doit comporter des balises HTML, enveloppez le HTML dans une description de 
type CDATA : <photo> <legende> <! [CDATA[Marais salants de <t»GUERANDE</ 
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b>] ]> </legende> </photo>, et ciblez la valeur contenue entre les balises <legende > et </ 
legende>, avec la syntaxe donneesXML. photo [ numeroDuNoeud] . legende. toString ( ) . 

■ Pour cibler enfin plus specifiquement un noeud dont vous connaissez la valeur d'un attribut : <photo 
largeur="600" hauteur="450"> <image>images/photo0. jpg</image> </photo>, utilisez la 
syntaxe suivante : donneesXML. photo [numeroDuNoeud] . (@largeur=="600" ) .toString( ) . 

■ Pour enfin convertir le contenu d'une balise en chaine de caracteres, specifiez .toString(), qui 
demeure facultatif. 

Une fois ces informations definies, nous pouvons distribuer les donnees a travers les objets 
du document Flash : 

// RETOUR 

retour_btn . addE vent List ener (MouseEvent .MOUSE_DOWN, retourDOWN) ; 
function retourDOWN(evt:MouseEvent) { 

if (i<0) { 

i=NombreDeNoeudsDansLeXML-1 ; 

} 

distribuerValeurs( ) ; 

} 

Dans la fonction XMLComplet, nous definissons successivement les ecouteurs et les fonc- 
tions rattachees aux boutons suivant et retour de 1' interface, ceci afin de directement pouvoir 
y exploiter les valeurs du XML. 

Dans la fonction retourDOWN, activee lorsque l'utilisateur clique sur le bouton 
retour_btn, nous commencons par reduire la valeur de i, initialement portee aO (i--). 
Si cette valeur est inferieure a 0 (i<0), une fois diminuee, elle est aussitot ramenee a 
la valeur correspondant au seuil limite de la galerie, c'est-a-dire au nombre de noeuds 
present dans le fichier XML, en l'occurrence 7 moins un (i=nombreDeNoeudDans- 
LeXML-1). 

A la fin de la fonction, nous appelons une autre fonction (distribuerValeurs) qui rassemble 
les instructions communes aux deux boutons, comme vu precedemment. 

Nous declinons ensuite l'ecouteur et la fonction pour le bouton suivant_btn, avant de 
refermer la fonction principale associee au flux XML : 

// SUIVANT 

suivant_btn.addEventListener(MouseEvent. CLICK, suivant) ; 
function suivant(evt:MouseEvent) { 
i++; 

if (i==NombreDeNoeudsDansLeXML) { 
i=8; 

} 

distribuerValeurs( ) ; 

} 

Pour le bouton suivant_btn, nous inversons les valeurs definies pour la condition if, en 
specifiant que la valeur de i doit revenir a 0 si celle-ci atteint la valeur correspondant au 
nombre de nceuds dans le XML (done, lorsque i vaut 7). Ainsi, nous passons directement de 
la valeur 6 a 0, ce qui nous permet de creer un effet de boucle sur le deroulement des images 
pour notre galerie. 
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Enfin, la fonction distribuerValeurs qui termine le programme rassemble les instruc- 
tions communes pour les deux boutons : 

function distribuerValeurs () { 

titre_txt.htmlText=donneesXML.photo[i] .titre.toString() ;// titre 
legende_txt.htmlText=donneesXML. photo [i] .legende.toString( ) ; // legende 
cheminPhoto=new URLRequest(donneesXML.photo[i] .image. toString( )); // image agrandie 
chargeurPhoto . load (cheminPhoto) ; 

} 

Une fois la gestion du nombre i assuree, il reste a passer les valeurs contenues dans les ele- 
ments du XML vers les objets de l'interface Flash. Pour chacune des trois instructions qui 
ponctuent la fonction, nous faisons reference a des noeuds de l'objet donneesXML, en y 
ciblant plus specifiquement les balises titre, legende et image. Pour convertir toutefois 
les valeurs en chaine de caracteres, et eviter d'importer les balises qui enveloppent notre 
selection dans le fichier XML, nous utilisons la methode toSt ring ( ) . 

Vous remarquez que le chemin qui appelle les images est enregistre dans le document XML. 
Nous aurions tres bien pu utiliser aussi une reference au fichier image en passant la valeur 
de i directement dans l'URL de l'image a importer, comme suit : 

cheminPhoto=new URLRequest ( "images/galerie/photo"+i+" . jpg" ) ; 

Mais en appelant l'entree contenue dans le XML, nous evitons de devoir publier a nouveau 
le document Flash si une modification devait etre apportee dans l'organisation des fichiers. 
Nous permettons en outre de centraliser la gestion des donnees dans un seul document, le 
XML. 

A retenir 

■ Pour optimiser la gestion des donnees dans un document Flash, il est plus confortable de les isoler 
dans un fichier XML. Cela evite de publier le document Flash a chaque modification des donnees. 

■ Les donnees isolees dans un fichier XML ne peuvent etre distributes que lorsque le XML est entiere- 
ment charge. II faut done, soit les distribuer dans la fonction executee a Tissue du chargement du 
XML, soit les stocker dans des variables globales. 

■ Pour eviter que I'incrementation d'une variable nombre (i) ne risque de faire reference a un noeud 
inexistant, nous pouvons interrompre ou reinitialiser I'incrementation a I'aide d'une simple instruc- 
tion if conditionnelle. 

■ Nous ciblons le noeud d'un document XML en nous referant a I'arbre racine prealablement identifie, 
puis en ciblant chacun des noeuds descendant de I'arborescence du fichier XML avec la methode 
pointee. II est egalement possible de cibler ponctuellement un attribut et de verifier sa valeur. Vous 
pouvez enfin atteindre un nceud en fonction de son ordre d'apparition dans I'arborescence XML 
avec une valeur passee en parametre du noeud cible, entre crochets comme [ i] . 
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Interactivity sur les objets dynamiques 

Nous savons comment associer des actions sur un objet place sur la scene, mais lorsque 
l'objet ou les instructions traitent des elements geres dynamiquement, il faut savoir identifier 
ces objets et ces donnees arin de permettre toute interaction avec eux. 

Dans cette section, nous presentons une declinaison de notre galerie en placant dynami- 
quement des vignettes dans une zone d'affichage constitute par un symbole de type 
MovieClip. En cliquant sur les vignettes generees dynamiquement, une action effectue un 
zoom sur un autre symbole et y charge l'image agrandie, correspondant a la vignette acti- 
vee. Les champs de texte dynamiques sont mis a jour egalement a chaque action (voir 
Figure 5.13). 

Figure 5.13 

Apercu de la 
galerie a la publi- 
cation. 



GUERANDE 





Exemples > ch5_galerieslmages_5.fla 

Dans la scene principale du document "ch5_galerieslmages_5.fla", au-dessus du caique 
f ond_mc, le symbole cible_mc sert de conteneur pour les images agrandies que nous allons 
charger en cliquant sur les vignettes du bas. Ce conteneur contient aussi un autre symbole, 
carreBlanc_mc. Ce symbole est masque par defaut avec la propriete visible passee sur 
false via ActionScript. Ce carre blanc, lorsqu'il est visible, sert de signaletique pour per- 
mettre a l'utilisateur d'identifier l'objet clique. A chaque clic, nous prevoyons de le redi- 
mensionner et de le repositionner sous l'objet clique pour le souligner et reconstituer 
dynamiquement un effet clique. 

Les autres elements sont similaires a ceux des sections precedentes. Nous retrouvons la 
jauge de chargement, les boutons suivant et retour, les champs de texte dynamiques, ainsi 
qu'un caique qui affiche des elements graphiques de l'interface nomme interface. Nous 
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avons ajoute ici, au-dessus des autres caiques, un symbole cibleVignettesjnc, vide, et un 
masque, pour y placer les vignettes qui sont gerees dynamiquement. Le masque sert a res- 
treindre la zone d'affichage de ce caique pendant son deplacement, lorsque nous cliquons 
sur les boutons suivant et retour (voir Figures 5.14 et 5.15). 



Figure 5.14 

Apercu de la 
scene principale. 
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Figure 5.1 5 

Apercu du 
scenario de la 
scene principale. 



10 15 20 25 30 



■J masqueVignettes 
cibleVignettes_r 

titre_t*t 
•»J legende_txi 
\i suivant.bin 
^1 reiour_btn 
\1 chargementmc 
^1 dble_mc 

fond_mc 



u a 
m 

□ 
□ 
□ 



EE 



Dans le caique nomme actions, nous pouvons lire le code suivant : 

// initialisation 

import gs.*; 
import gs. easing.*; 
import gs. events.*; 



var i:int=0; 

var ecartEntreVignettes : Number=90 ; 

var positionCibleVignettesInit : Number=cibleVignettes_mc.x; 
cibleVignettes_mc . carreBlanc_mc .x=-2; 
cibleVignettes_mc . carreBlanc_mc . y=-2 ; 
cibleVignettes_mc . carreBlanc_mc . visible=f alse; 

// Chargement initial PHOTO AGRANDIE 
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// CHARGEMENT 

var chargeurPhoto : Loader= new Loader(); 
var cheminPhoto:URLRequest; 

// PROGRESSION 

chargeurPhoto . content Loader Info . addE vent Listener (ProgressEvent . PROGRESS, 
>» chargementENCOURS) ; 

function chargementENCOURS(evt:ProgressEvent) { 
chargement_mc . visible=true ; 

var valeurPourcentage : Number = (evt . currentTarget . bytesLoaded / evt.current- 

Target . bytesTotal) ; 
chargement_mc . barre_mc . scaleX=valeurPourcentage ; 

chargement_mc . pourcentage_txt . text=(Math . ceil( valeurPourcentage*1 00) )+"%"; 

} 

// COMPLETE 

chargeurPhoto . contentLoaderlnf o . addEventListener( Event . COMPLETE , chargementCOMPLET) ; 
function chargementCOMPLET(evt:Event) { 

cible_mc . addChild (chargeurPhoto) ; 

chargement_mc . visible=f alse; 

} 

// Chargement du XML 

var chargeurXML:URLLoader = new URLLoader(); 
chargeurXML . load (new URLRequest ( "xml/galerie . xml" ) ) ; 
chargeurXML.addEvent Listener (Event .COMPLETE, XMLComplet) ; 

function XMLComplet (evt: Event) { 

var donneesXML:XML=XML(evt. target. data) ; 

var NombreDeNoeudsDansLeXML:Number=donneesXML. photo. length() ; 

for (i; i<NombreDeNoeudsDansLeXML; i++) { 
// chargement des vignettes 
var chargeurVignette : Loader= new Loader(); 
var vignette:String=donneesXML.photo[i] . vignette . toString ( ) ; 
var cheminVignette:URLRequest=new URLRequest (vignette) ; 
chargeurVignette . load (cheminVignette) ; 
chargeurVignette . x=ecartEntreVignettes*i; 
chargeurVignette . name=String (i) ; 
cibleVignettes_mc . addChild (chargeurVignette) ; 

// actions sur vignettes 

cibleVignettes_mc . addEvent List ener(MouseE vent .CLICK, clickVignettes) ; 
function clickVignettes(evt :MouseEvent) { 

cibleVignettes_mc . carreBlanc_mc . visible=t rue ; 

titre_txt.htmlText=donneesXML. photo [evt .target .name] .titre.toString() ; 

legende_txt . htmlText=donneesXML . photo [ evt .target . name] . legende . toString ( ) ; 

cheminPhoto=new URLRequest ( "images /galerie/ photo "+evt . target . name+" . jpg" ) ; 

chargeurPhoto. load (cheminPhoto) ; 

TweenMax.to(cibleVignettes_mc.carreBlanc_mc, 1 , 
{x : (ecratEntreVignettes* (evt .target . name-1 ) ) -2, ease : Strong . easeOut}) ; 
// transition carreBlanc 

cible_mc . scaleX=0 . 1 ; 

ciblejnc . scaleY=0 . 1 ; 

cible_mc . x=mouseX; 

cible_mc . y=mouseY; 
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TweenMax . to ( cible_mc , 3, {x:100, y:50, scaleX:1, scaleY:1, ease : Strong. easeOut} ) ; 

} 

} 

} 

// Boutons NAVIGATION 

retour_btn . addE vent List ener (MouseEvent .MOUSE_DOWN, retourDOWN) ; 
function retourDOWN(evt:MouseEvent) { 

if (cibleVignettes_mc.x<=positionCibleVignettesInit*2) { 
TweenMax. to (cibleVignettes_mc, 1 , 

{x : cibleVignettesjnc . x+ecratEnt reVignettes , ease : Elastic . easeOut} ) ; 

} 

} 

suivant_btn.addEventListener(MouseEvent. CLICK, suivant) ; 
function suivant(evt:MouseEvent) { 
if (cibleVignettesjnc. x>=0) { 

TweenMax. to(cibleVignettes_mc, 1 , {x : cibleVignettesjnc . x-ecratEntre- 

*» Vignettes, ease : Elastic . easeOut} ) ; 

} 

} 

Le code est structure en quatre etapes. II fonctionne de la maniere suivante : nous commen- 
cons par importer les classes necessaires et nous instancions le module de chargement 
d'images, sans activer de chargement. Ainsi, nous placons les fonctions liees au chargement 
et a la jauge de progression independamment de la gestion des donnees XML. Dans un 
deuxieme temps, nous traitons les donnees importees par le XML, a travers la fonction XML- 
Complet. Nous permettons ainsi de charger les vignettes dynamiquement et les distribuer 
dans notre interface avec un positionnement precis. Dans un troisieme temps, dans la fonc- 
tion XMLComplet, nous definissons les actions au clic sur les vignettes. Nous terminons 
notre developpement en specifiant quelques actions, independantes des donnees XML, pour 
controler le deplacement du conteneur de vignettes dans notre dispositif global de naviga- 
tion. II n'y a pas de relation entre les donnees XML importees et ce dispositif de navigation 
si ce n'est que la repercussion indirecte de la quantite de vignettes chargees dans le conteneur, 
qui aidera a definir les limites de son positionnement. 

Tout d'abord, nous commencons par appeler les classes requises pour les animations 
TweenMax : 

// initialisation 

import gs.*; 
import gs. easing.*; 
import gs. events.*; 

Puis, nous initialisons un certain nombre de variables : 

var i:Number=0; 

var ecartEnt reVignettes : Number=90; 

var positionCibleVignettesInit : Number=cibleVignettesjnc.x; 
cibleVignettesjnc . carreBlancjnc . x=-2 ; 
cibleVignettesjnc . carreBlancjnc .y=-2; 
cibleVignettesjnc . carreBlancjnc . visible=f alse; 
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La premiere, le nombre i, permet de definir l'index (la position courante) de l'image active, 
chargee dans la zone d'agrandissement cible_mc. 

La variable ecartEntreVignettes sert a determiner en une seule fois la valeur qui separe 
chaque point d'origine de chaque vignette que le script va placer dans cibleVignettesjnc. 
Cette valeur (90) est utilisee a plusieurs reprises. Pour simplifier la gestion du code, nous la 
vehiculons a travers une variable. 

La variable positionCibleVignettelnit sert a memoriser la position de depart du conte- 
neur de vignettes pour etre exploitee plus tard dans le calcul des limites du defilement du 
conteneur de vignettes cibleVignettesjnc. 

Puis, les trois instructions suivantes affectent le symbole carreBlanc_mc, place dans le 
symbole cibleVignettes_mc : 

cibleVignettes_mc.carreBlanc_mc.x=-2; 
cibleVignettes_mc . carreBlancjnc . y=-2 ; 
cibleVignettes_mc . carreBlancjnc . visible=f alse; 

Nous determinons la position de depart du carre blanc en le calant en X et en Y a 2 pixels 
plus haut et a gauche de l'origine du clip qui le contient (celle du symbole 
cibleVignettes_mc), car le carre blanc mesure 4 pixels de large de plus que les vignettes. 
En le decalant de 2 pixels en haut et a gauche, nous centrons ce carre blanc. Nous formali- 
sons ainsi un contour signaletique de 2 pixels qui souligne chaque vignette cliquee. A cha- 
que clic de souris sur l'une d'entre elles, l'objet est repositionne sous la vignette. Par defaut, 
le carre blanc est rendu invisible (visible=f alse), car aucune image n'est encore affichee 
dans la zone d'agrandissement. Mais il est de nouveau visible en cliquant sur l'une ou 
1' autre des vignettes. 

Puis, nous mettons en place le chargement d'images et la jauge de progression, sans activer 
toutefois de chargement sur une premiere image ni l'aj outer sur la scene : 

// Chargement initial PHOTO AGRANDIE 

// CHARGEMENT 

var chargeurPhoto : Loader= new Loader(); 
var cheminPhoto:URLRequest; 

// PROGRESSION 

chargeurPhoto . content Loader Info . addE vent List ener( Prog ressE vent . PROGRESS, 
>» chargementENCOURS) ; 

function chargementENCOURS(evt:ProgressEvent) { 
chargement_mc . visible=true; 

var valeurPourcentage : Number = (evt.currentTarget.bytesLoaded / evt.current- 

Target . bytesTotal) ; 
chargement_mc . barre_mc . scaleX=valeurPourcentage ; 

chargement_mc . pourcentage_txt . text=(Math . ceil( valeurPourcentage*1 00) )+"%"; 

} 

// COMPLETE 

chargeurPhoto . content Loader Info . addE vent Listener (Event .COMPLETE, 

chargementCOMPLET) ; 
function chargementCOMPLET(evt:Event) { 

cible_mc . addChild (chargeurPhoto) ; 

<=* chargement_mc.visible=false; 

} 
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Une fois les fonctions de gestion du chargement definies, nous importons le document 
XML, avec le chargeur chargeurXML, la methode load qui active le chargement du contenu, et 
l'ecouteur qui appelle la fonction une fois le chargement effectue. Dans cette fonction, nous 
retrouvons la definition de l'arbre XML vehicule par la variable donneesXML et la longueur 
de l'arbre, designee par nombreDeNoeudsDansLeXML : 
// Chargement du XML 

var chargeurXML:URLLoader = new URLLoader(); 
chargeurXML. load (new URLRequest ( "xml/galerie . xml" ) ) ; 
chargeurXML. addEvent Listener (Event .COMPLETE, XMLComplet) ; 

function XMLComplet (evt: Event) { 

var donneesXML:XML=XML(evt. target. data) ; 

var NombreDeNoeudsDansLeXML:Number=donneesXML. photo. length() ; 

} 

A la suite de la definition des premieres variables, nous pouvons identifier l'utilisation 
d'une boucle f or : 

for (i; i<NombreDeNoeudsDansLeXML; i++) { 

// actions a repeter autant de fois que d 1 iterations induites par la boucle. 

} 

Une boucle for permet de rassembler, dans un seul constructeur, un ensemble destruc- 
tions repetitives, dont seul un ou quelques parametres changent. En l'occurrence, seule la 
valeur vehiculee par le nombre i change pour charger, positionner et definir des actions et 
interactions avec les vignettes. 

Dans cette boucle, nous indiquons de considerer la valeur de i telle que definie initialement 
(i vaut 0 tel que nous l'avons defini en amont), puis, si i reste inferieur au nombre de nceuds 
presents dans le XML (i<nombreDeNoeudsDansLeXML), alors, nous l'incrementons (i++). 




Mecanisme d'une boucle for. Une boucle for presente la structure suivante : 

for(valeur de reference ; condition a respecter ; modification de la valeur de 



reference) { 

// instructions a repeter autant de fois que d 1 iterations dans la boucle. 
} 

A l'interieur de la boucle for, nous placons les instructions a reproduire : 

// chargement des vignettes 

var chargeurVignette : Loader= new Loader(); 

var vignette:String=donneesXML.photo[i] . vignette . toString ( ) ; 

var cheminVignette : URLRequest=new URLRequest (vignette) ; 

chargeurVignette . load (cheminVignette) ; 

chargeurVignette . x=ecartEntreVignettes*i; 

chargeurVignette . name=String (i) ; 

cibleVignettes_mc . addChild (chargeurVignette) ; 

// actions sur vignettes 

cibleVignettes_mc . addE vent List ener (MouseEvent .CLICK, clickVignettes) ; 
function clickVignettes(evt:MouseEvent) { 
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cibleVignettesjnc . carreBlanc_mc . visible=true ; 

titre_txt . htmlText=donneesXML . photo [ evt .target . name] . tit re . toString( ) ; 
legende_txt . htmlText=donneesXML . photo [evt. target. name] .legende.toString() ; 
cheminPhoto=new URLRequest ( " images /gale rie/ photo "+evt .target . name+" . j pg" ) ; 
chargeurPhoto . load (cheminPhoto) ; 

TweenMax.to(cibleVignettes_mc.carreBlanc_mc, 1 , {x: (ecratEntreVignettes* 

* (evt .target . name-1 ) ) -2, ease : Strong . easeOut}) ; 

// transition carreBlanc 

cible_mc . scaleX=0 . 1 ; 

ciblejnc . scaleY=0 . 1 ; 

cible_mc . x=mouseX; 

cible_mc . y=mouseY; 

TweenMax.to(cible_mc, 3, {x:100, y:50, scaleX:1, scaleY:1, ease : Strong. easeOut} ) ; 

} 

La premiere serie d' instructions a reproduire derinit le chargement des vignettes et utilise, 
en parametre de l'URL, la valeur incrementee de i. Ainsi, a chaque iteration, chaque image 
definie dans le XML sera chargee successivement jusqu'a la derniere, stoppee par la condi- 
tion de la boucle for (i<nombreDeNoeudsDansLeXML) : 

// chargement des vignettes 

var chargeurVignette : Loader= new Loader(); 

var vignette:String=donneesXML.photo[i] . vignette. toString() ; 

var cheminVignette : URLRequest=new URLRequest (vignette) ; 

chargeurVignette . load (cheminVignette) ; 

chargeurVignette . x=ecartEntreVignettes*i; 

chargeurVignette . name=String(i) ; 

cibleVignettesjnc . addChild (chargeurVignette) ; 

Pour permettre, par la suite, d'attacher un ecouteur a chaque objet place dynamiquement, 
nous devons pouvoir identifier chaque objet individuellement. Pour ce faire, nous utilisons 
la propriete name, que nous attachons a chaque objet charge (chargeur- 
Vignette . name=String (i)) en affectant, pour valeur de nom, la valeur correspondant a 
l'ordre d'affichage de chacune de ces vignettes. Ainsi, la vignette 0 se nomme 0, la 
vignette 1 se nomme 1, et ainsi de suite. Pour cibler chaque objet plus tard, il sufrira d'invoquer 
son nom en utilisant de nouveau la propriete name. 

Dans ces instructions de chargement des vignettes, nous relevons aussi le positionnement dyna- 
mique est egalement orchestre par la propriete x. Nous determinons cette valeur en multipliant 
l'ecart defini plus haut entre les vignettes (90 pixels) par la valeur de i avec chargeur- 
Vignette . x=ecartEntreVignettes*i. Done, chaque vignette ajoutee a toute nouvelle itera- 
tion est placee a 90 pixels de plus que la precedente. Comme chacune d' entre elles 
mesure precisement 80 pixels de large. Nous obtenons une marge de 10 pixels entre chaque 
vignette. 

Une fois les vignettes affichees, nous ajoutons un ecouteur sur l'objet conteneur global 
cibleVignettesjnc. Pour connaitre l'objet sur lequel l'utilisateur a clique, nous le ciblons 
grace a la propriete name associee a l'expression evt. target. Cette propriete permet 
d'identifier un objet lorsqu'il est clique au sein du conteneur auquel est rattache l'ecouteur : 

cibleVignettesjnc. addE vent Listener (MouseEvent .CLICK, clickVignettes) ; 
function clickVignettes(evt:MouseEvent) { 

// actions a executer 

trace (evt. target. name) 

} 
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Difference entre target et currentTarget 

Dans I'expression evt .target . name, nous designons la propriete name (le nom) de I'element active 
contenu dans I'objet (target) auquel est rattache la classe invoquee par I'ecouteur, et done, I'evene- 
ment qui lui est associe (evt). Cette expression (target), est employee lorsque plusieurs objets 
isoles dans un meme et unique conteneur executent la meme fonction. 

Dans I'expression evt. currentTarget. name, nous designons la propriete name (le nom) de I'objet 
attache a I'ecouteur lui-meme (evt. currentTarget). Cette expression (currentTarget) est utilisee 
lorsque plusieurs objets isoles et sans relation executent la meme fonction. 

Considerons I'exemple suivant : prenons deux ensembles, un ensemble de lettres et un ensemble de 
chiffres. Placons un ecouteur sur chacun d'eux. Les deux ensembles invoquant la fonction alors 
(evt : Event), la propriete target renverra la lettre ou le chiffre qui aura intercepte le die, tandis 
que currentTarget renverra le groupe auquel I'ecouteur est applique et dont I'evenement a ete 
intercepte. 

Ainsi, il n'est pas necessaire de connaitre a I'avance I'objet qui va etre active et qui va executer la 
fonction pour lui affecter un comportement. 



Dans cette fonction, nous remplacons Taction trace, citee en exemple, par les instructions 
suivantes : 

cibleVignettes_mc . carreBlanc_mc . visible=true ; 

titre_txt . htmlText=donneesXML . photo [ evt .target . name] . tit re . toSt ring ( ) ; 
legende_txt . htmlText=donneesXML . photo [ evt .target . name] . legende . toString ( ) ; 
cheminPhoto=new 

«* URLRequest (donneesXML. photo [ evt .target . name] . image . toString ( ) ) ; 
chargeurPhoto . load (cheminPhoto) ; 
TweenMax.to(cibleVignettes_mc.carreBlanc_mc, 1 , 

{x: (ecartEntreVignettes* (evt . target. name-1 ) )-2, ease:Strong.easeOut}) ; 
cible_mc . scaleX=0 . 1 ; 
cible_mc . scaleY=0 . 1 ; 
cible_mc .x=mouseX; 
cible_mc .y=mouseY; 

TweenMax.to(cible_mc, 3, {x:100, y:50, scaleX:1, scaleY:1, 
»» ease : Strong . easeOut} ) ; // transition Zoom 

A chaque clic sur une vignette, nous reactivons l'affichage du carre blanc, masque par 
defaut, avec la propriete visible passee sur true : 

cibleVignettes_mc . carreBlanc_mc. visible=true; 

Puis, nous modifions le texte contenu dans les champs de texte dynamiques titre_txt et 
legende_txt : 

tit re_txt . htmlText=donneesXML . photo [ evt . target . name] . tit re . toString ( ) ; 

Pour determiner le noeud actif, nous utilisons un nceud de l'arbre XML donnneesXML 
(donneesXML. photo) et specifions le nom de I'objet clique avec evt .target . name, entre 
crochets. 



LE CAMPUS 



ActionScript 3 ET motion design 



Nous procedons de meme pour designer le noeud correspondant a l'URL de l'image 
agrandie : 

legende_txt . htmlText=donneesXML. photo [evt. target. name] .legende.toString(); 

Le chargeur relance ensuite l'affichage de l'image agrandie : 

chargeurPhoto . load (cheminPhoto) ; 

Enfin, nous appliquons une transition TweenMax sur la position horizontale du carre blanc 
pour creer ainsi l'effet de deplacement. Seul le parametre x doit etre calcule et defini. II suf- 
fit de recuperer au travers de son nom 1' index de position de la vignette et de le multiplier 
par l'espacement existant entre chaque vignette (90 pixels) puis de retrancher le decalage 
de 2 pixels necessaire pour assurer la marge du carre blanc. 

Attention, comme lors du chargement la premiere vignette est deja en place, il nous faut en 
tenir compte et demarrer 1' incrementation a 1, done retrancher 1 a la valeur d' index de la 
vignette. A defaut de cette correction, nous observerions un decalage de 90 pixels vers la 
droite. 

Nous terminons enfin le code par la definition d' actions sur les boutons suivant et re tour, 
pour modifier la position du conteneur cibleVignettes_mc, a chaque clic sur les fleches 
correspondantes : 

// Boutons NAVIGATION 

retour_btn . addE vent List ener (MouseEvent .M0USE_D0WN, retourDOWN) ; 
function retourDOWN (evt: MouseEvent) { 

if (cibleVignettes_mc.x<=positionCibleVignettesInit*2) { 
TweenMax. to(cibleVignettes_mc, 1 , 
{x : cibleVignettes_mc .x+ecratEntreVignettes, ease : Elastic . easeOut} ) ; 

} 

} 

suivant_btn.addEventListener(MouseEvent. CLICK, suivant) ; 
function suivant(evt:MouseEvent) { 
if (cibleVignettes_mc.x>=0) { 

TweenMax. to (cibleVignettes_mc, 1 , {x:cibleVignettes_mc.x-ecratEntreVignettes, 

*► ease : Elastic . easeOut} ) ; 

} 

} 

Dans chacune de ces deux fonctions, 1' animation TweenMax est activee uniquement si la 
position de la cible des vignettes l'y autorise. Plus exactement, 1' animation est lancee si, 
pour le deplacement du menu dans le sens du retour, sa position courante reste inferieure a 
sa position initiale (voir Figure 5.16). Nous multiplions cependant la valeur par deux afin de 
recentrer arbitrairement l'objet dans la scene. Mais ce n'est pas une obligation. 
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TweenMax var positionCibleVignetteslnit:Number=cibleVignettes_mc.x; 
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Nous procedons au meme type de calcul dans 1' autre sens, avec la deuxieme fonction. Nous 
specifions alors que ranimation TweenMax peut se produire tant que la position de l'objet ne 
passe pas par la limite de gauche qui vaut 0. 



A retenir 

■ Pour gerer une construction dynamique d'interface dont les mecanismes de mise en forme se repetent, 
nous pouvons utiliser une boucle for. 

■ Pour associer une action a un objet genere dynamiquement, il est possible de cibler l'objet en utilisant 
sa propriete name. 

■ La propriete target se distingue de la propriete currentTarget en cela qu'elle cible l'objet active, 
contenu dans l'objet attache a I'ecouteur, alors que currentTarget cible uniquement l'objet atta- 
che a I'ecouteur. La propriete currentTarget est done employee pour distinguer plusieurs objets 
isoles qui executent la meme fonction. La propriete target est utilisee pour designer plusieurs 
objets d'un meme conteneur qui executent la meme fonction. 



Resoudre les erreurs eventuelles au chargement 
et a I execution 

Des erreurs de chargement ou d' execution peuvent apparaitre lorsque vous produisez avec 
des fichiers externalises (pour le chargement) ou lorsque vos developpements sont lourds ou 
executes sur des systemes instables ou a bout de souffle (pour l'execution). Une erreur, fut- 
elle benigne, peut, dans certains cas, neutraliser l'ensemble de votre application si celle-ci 
n'est pas orientee vers une action alternative. 

Dans cette section, nous presentons les instructions qui permettent d'identifier les erreurs et 
celles qui permettent de les resoudre, a travers des actions trace. 



Exemples > ch5_galerieslmages_6.fla 



Dans la scene principale du document "ch5_galerieslmages_6.fla", au-dessus du caique 
f ond_mc, figure un unique caique actions (voir Figure 5.17). 
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Dans le caique nomme actions, nous pouvons lire le code suivant 

// Chargement du XML 

var chargeurXML:URLLoader = new URLLoader(); 
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//chargeurXML.load(new URLRequest( "xml/galerie.xml" ) ) ; 
chargeurXML . load (new URLRequest ( "xml/g .xml" ) ) ; 
chargeurXML.addEvent Listener (Event .COMPLETE, XMLComplet) ; 

chargeurXML . addEvent Listener ( IOErrorEvent . I0_ERR0R, siErreur) ; 
function siErreur(evt: IOErrorEvent) { 
trace( "Erreur de chargement" ) ; 

} 

function XMLComplet (evt: Event) { 
trace( "Document XML charge"); 

// 

try { 

trace( "Document correctement execute"); 

} 

catch (monErreur:Error) { 

trace( "Document mal execute. Voici l'erreur = "+monErreur) ; 

} 

finally { 

trace( "Instruction post analyse. Executee avec ou sans erreur, apres 1 1 analyse .") ; 

} 

} 

Dans notre document, nous chargeons le fichier XML utilise pour la realisation de la galerie 
photo. Mais aucune action n'est distribute pour traiter les donnees. Nous avons simplement 
place dans le code les instructions qui permettent, a chaque etape, de localiser tout eventuel 
probleme de chargement ou d'execution. Les actions trace qui apparaissent permettent alors 
d'identifier l'apparition de tel ou tel probleme et, si besoin, de substituer ces actions trace 
par des instructions qui proposent un contenu alternatif a ce qui devait apparaitre en 
1' absence d'erreur. 

Ainsi, dans le code de ce document, nous avons mis en commentaire la ligne qui fait refe- 
rence a l'URL du document XML valide. Puis, nous l'avons dupliquee en remplacant le 
nom du fichier valide par un nom invalide. Ainsi, le fichier qui n'existe pas generera une 
erreur de chargement. 

Pour traiter une erreur liee au chargement, nous placons un ecouteur qui utilise l'evenement 
I0_ERR0R, disponible via la classe IOErrorEvent. Cela donne : 

chargeurXML. addEventListener(IOErrorEvent.IO_ERROR, siErreur) ; 
function siErreur(evt:IOErrorEvent) { 

trace( "Erreur de chargement generee volontairement dans le cadre de cet exemple"); 

} 

Lorsque le document est publie, le fichier inexistant n'est pas trouve. Le message, inscrit 
dans Taction trace ("erreur de chargement generee volontairement dans le cadre de cet 
exemple"), apparait aussitot dans la fenetre de sortie. En reactivant l'instruction URLRequest 
valide et en neutralisant la commande erronee, le message lie a l'erreur de chargement n'apparait 
plus lorsque le document est a nouveau publie. 

Plus loin, une fois le document XML charge correctement, si l'instruction valide a ete reac- 
tivee, nous pouvons tester les autres formes d'erreurs liees a l'execution. Les commandes 
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qui gerent ce type d'erreurs sont placees a l'interieur de la fonction appelee a Tissue du 
chargement du document XML. 

Dans un premier temps, nous verifions que le document a effectivement bien ete charge. 
Pour cela, nous introduisons une simple action trace au debut de la fonction. Cette action ne 
verifie rien sinon qu'elle ne peut etre executee que si le document a effectivement bien ete 
charge et elle nous informe done sur le succes du chargement : 

trace ( "Document XML charge"); 

Ensuite, pour controler la validite des instructions qui seront executees apres le chargement, 
toutes les lignes de code de cette fonction doivent etre introduites dans le bloc d' instructions 
try{}. A defaut, les actions non incluses entre les deux accolades qui suivent la methode 
try ne seront pas verifiees. Pour tester la validite des actions contenues dans le bloc des- 
tructions try{}, nous y placons une action trace qui confirme la bonne execution de 
1' ensemble du programme : 

try { 

trace( "Document correctement execute"); 

} 

Un bloc try doit toujours etre suivi, soit d'un bloc catch{}, soit d'un bloc f inally{}, soit 
des deux. 

Le bloc catch{ } propose l'execution d'une instruction alternative dans le cas oil une erreur 
aurait ete detectee. Par exemple, vous pouvez afficher a travers le bloc d'instruction 
catch{} un message. Ce message peut signaler, a l'utilisateur, une erreur d'execution inde- 
pendante du site et lui suggerer de recharger le document ou de se reconnecter ulterieure- 
ment. Vous pouvez aussi executer une version allegee de votre programme propose 
initialement dans le bloc try{ }, mais cela augmente naturellement la charge de votre deve- 
loppement. Dans notre exemple, le bloc catch{} execute une action trace qui affiche le type 
d'erreur rencontre, en invoquant la classe Error relative a cette commande : 

catch (monErreur:Error) { 

trace( "Document mal execute. Voici l'erreur = "+monErreur) ; 

} 

Le bloc f inally{} s'execute, lui, quel que soit le resultat obtenu par les blocs try{} et 
catch{}. II sert a ponctuer l'execution d'un programme par une action complementaire. 
Ce bloc est moins usite que les deux precedents, mais comme son nom l'indique, il per- 
met de finaliser un programme et orienter eventuellement l'utilisateur sur les actions a 
conduire. II peut aussi servir a reinitialiser les valeurs initialisees lors de la tentative de 
la premiere methode try{}. Dans notre exemple, une action trace termine le pro- 
gramme : 

finally { 

trace( "Instruction post analyse. Executee si erreur ou sans erreur, apres 
1 1 analyse . " ) ; 

} 
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Mais, etant executee meme lorsqu'il n'y a pas d'erreur, il convient d'employer le bloc 
finally{}, avec une structure conditionnelle qui initialise les valeurs, seulement si 
necessaire. 

A retenir 

■ II est possible de gerer les erreurs de chargement grace a la classe lOErrorEvent. 

■ II est possible de gerer les erreurs d'execution grace a la methode try et d'introduire une action 
alternative avec la methode catch. 

■ Une methode finally permet de ponctuer, a travers une structure conditionnelle, la detection 
d'une erreur par une instruction complementaire, si necessaire. 



Gestion de site dynamique avec XML 

II se distingue deux types de developpement : le developpement front-office et le develop- 
pement back-office. 

Le developpement front-office designe la programmation effectuee sur un ordinateur local 
et executee dans le navigateur cote client. Meme si ActionScript permet aussi de realiser des 
developpements cote serveur, ActionScript, JavaScript, HTML, sont des langages de deve- 
loppement utilises generalement en front-office. 

Le developpement back-office consiste a programmer des applications qui sont executees 
cote serveur, et non plus localement. Si vous les realisez localement, vous devez installer sur 
votre poste de travail un serveur d' emulation pour tester 1' execution de vos programmes. 
PHP, par exemple, est un langage de scripts tres largement utilise et execute cote serveur. Ce 
langage est en mesure de traiter des donnees depuis une base MySQL placee sur un serveur 
distant, et done, de centraliser des donnees en vue d'etre redistributes dans un site. PHP 
peut egalement convertir assez simplement, les donnees stockees dans une base MySQL, en 
flux XML, comme si vous disposiez finalement d'un fichier XML localise et stocke cote 
client. 

Des lors que vous savez exploiter XML dans la construction d'interfaces dynamiques en 
Flash, vous savez done aussi appeler un meme flux XML genere depuis un serveur distant, 
avec une application realisee dans un langage dynamique tel que PHP, par un prestataire 
developpeur back-office tiers, par exemple. Vous pouvez alors acceder, indirectement, et 
grace aux instructions PHP, a des donnees centralisees dans une base MySQL, sous la forme 
d'une simple requete XML ou d'un simple lien vers un fichier PHP, que vous passez alors 
en parametre de la methode URLrequest() a l'interieur de votre Flash (par exemple : var 
chemin : URLRequest= new URLRequest ( "http : / /www. monsite . com/scriptQui- 
RenvoieUnFluxXML . php" ) ;). II devient done relativement simple de confier la gestion des 
donnees a un developpeur back-office et de vous concentrer sur votre propre developpement 
en local en ActionScript, sans avoir a coder une seule ligne en PHP, sans jamais avoir a 
echanger le moindre fichier avec votre prestataire, ni installer quelque serveur que ce soit 
sur votre poste de travail, ni meme placer vos documents Flash sur un serveur d'execution 
pour les publier. 



Les galeries d'images 




II existe une autre alternative a la relation client/serveur, a base de Flash. C'est AMFPHP, 
qui permet a Flash de directement communiquer avec un serveur et inversement. 

Cette methode de repartition des taches entre developpeur front-office et back-office, grace 
au XML, s'avere particulierement efficace en production, car elle permet au graphiste 
codeur, de lui epargner la gestion d'un serveur ou d'un emulateur de serveur et au deve- 
loppeur back-office, de s'abstraire d'un document Flash parfois complexe a depecer. Cette 
methode permet, aussi, de bien separer les taches en programmation et de garantir que cha- 
que partie concernee puisse se concentrer sur sa specialite, sans jamais avoir a soumettre 
quelque partie que ce soit de son travail a un autre, tout en reliant pourtant dynamiquement 
les fichiers entre eux. 



Synthese 

Dans ce chapitre, vous avez appris a optimiser considerablement le poids de vos documents 
lorsqu'ils affichent des images en grand format, en externalisant les contenus dans des 
repertoires places au sein de votre site. Vous avez vu comment realiser des galeries d'images 
et interagir avec des objets places dynamiquement. Vous avez appris a centraliser des infor- 
mations dans un document XML pour simplifier la maintenance de votre site. Enfin, vous 
savez maintenant contourner les erreurs eventuelles, observees au chargement ou a l'execu- 
tion des programmes. Vous etes a present en mesure de creer des interfaces dynamiques 
simples, et d'externaliser vos donnees dans un fichier XML. Vous etes egalement au fait de 
la maniere de traiter des donnees generees dynamiquement depuis une base placee sur un 
serveur distant si celles-ci sont distributes sous la forme d'un lien ou d'une requete XML. 
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Introduction 

La gestion de la video au sein de Flash est assez proche de celle de tout autre type de contenu. 
De cette maniere, nous pouvons envisager son integration independamment de son cadre 
habituel de diffusion, avec des dimensions libres et de 1' inter activite, comme si nous trai- 
tions une image en somme. 

Flash integre la gestion de contenus videos depuis la version 6 (MX). Mais il compte 
aujourd'hui trois formats que nous regroupons dans deux grandes families : le format FLV, 
flexible et universel, et le format F4V, plus "classieux" et recent. Le premier integre deux 
codecs, le Sorenson Spark et le One2 VP6 tandis que le second propose uniquement le 
H-264. Nous abordons les specificite du H-264 a travers le format F4V dans le chapitre sui- 
vant. Dans ce chapitre, nous detaillons l'encodage de la video au format FLV avec ces deux 
premiers codecs, plus anciens. 

Dans sa version 6, le lecteur Flash utilisait le codec Sorenson Spark, tres compact, et a ainsi 
largement contribue a la diffusion a grande echelle de la video sur le Web. 

Avec Flash 8, l'apparition du codec On2 VP6 a permis d'ameliorer la qualite des videos 
mouvementees dans Flash et de gerer la couche alpha eventuellement integree au flux 
video. 

Par video standard, nous entendons done l'ensemble des videos publiees au format FLV, 
encodee en SorenSon Spark, sans couche transparente, destine a un affichage simple et 
compatible avec les plus anciennes versions du lecteur Flash (version 6). 

Par video composite, nous entendons la composition d' interfaces a partir de sources videos 
qui possedent une couche transparente (couche alpha), encodee en on2VP6 avec la couche 
alpha. La transparence, lorsqu'elle est activee, permet de realiser des interfaces graphique- 
ment elaborees telles que l'incrustation d'un personnage filme sur fond vert et detoure, des 
animations de particules, la superposition d'elements de decor animes, des espaces publici- 
taires en premier plan d'une mise en page, etc. 

Dans ce chapitre, nous detaillons d'abord les contraintes generates liees a la gestion d'une 
video pour le Web. Nous abordons ensuite les techniques elementaires de publication d'une 
video depuis un logiciel tel que Apple Motion, disponible dans la suite Apple Final Cut Stu- 
dio, ou Adobe After Effects de la suite video Adobe, avec de la transparence. Nous voyons 
aussi l'encodage de videos standard vers Flash pour un export au format FLV, depuis tout 
type de logiciel. Enfin, nous traitons l'integration simple de ces videos dans Flash, a l'aide 
du composant FLVPlayBack. 

A Tissue de ce chapitre sur la video standard et composite au format FLV, vous serez en 
mesure de realiser des interfaces contenant des videos simples, sophistiquees et optimisees 
pour toutes les versions de Flash qui acceptent la video. 
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Concevoir la video pour le Web 

Lorsque vous preparez un contenu video a destination du Web, vous devez considerer que sa 
diffusion doit obeir a quelques caracteristiques liees a la nature meme du support de diffu- 
sion. Voici quelques questions/reponses qui vous guideront sur la creation de contenus 
videos a destination du Web, et plus particulierement, vers Flash. 

Quel ratio de pixels ? Une video echantillonnee pour le Web doit etre definie en pixels car- 
res, de ratio 1,00. Les ecrans d'ordinateur (qui executent la page web) possedent une trame 
de pixels carres, ce qui les distinguent des ecrans de television dont le ratio de pixels est res- 
pectivement 1,09 en PAL 4/3, 1,46 en PAL grand ecran, 0,9 en NTSC 4/3 et 1,21 en NTSC 
grand ecran. 

II est possible de convertir le ratio du format des videos a partir des logiciels Motion et After 
Effects. Pour connaitre le ratio de vos videos, ouvrez-les dans l'une de ces applications et 
observez leurs proprietes. Pour adapter le document au format pixels carres, definissez, 
dans les boites de dialogue qui apparaissent lors de la creation d'une nouvelle sequence 
video, un format de pixel carre et redimensionnez au besoin votre video. 

Avec ou sans trame ? La video analogique est composee de deux images (trame paire et 
trame impaire). Dans une diffusion pour la television, il faut toujours synchroniser ces deux 
images afin de ne pas dormer 1' impression d'un tremblement. L' image numerique n'est 
composee, elle, que d'une seule trame par image, mais integrate. Si vos images proviennent 
de sources analogiques (camescopes, VHS et/ou autre support Hi8), vous devez convertir 
ces images en images dites progressives, c'est-a-dire sans trame. Si, a l'inverse, vos images 
proviennent de sources numeriques, c'est inutile : elles sont deja progressives. 

Notez que les logiciels de montage et de trucage, ainsi que l'encodeur Adobe livre avec 
Flash, permettent de convertir d'un format vers l'autre. 

Une capture progressive vous permettra aussi d'extraire plus facilement une image nette, 
non tramee, pour la traiter dans Photoshop, en vue eventuellement de l'integrer dans une 
composition Flash ou vers un document imprime. 

Quelle cadence pour le Web ? La cadence (ou frequence) d'images est le nombre d'ima- 
ges fixes affichees en une seconde de film (elle est a 25 images par seconde pour une video 
standard en PAL). Si la cadence pour la television ou le cinema est importante, elle peut etre 
reduite pour le Web. Mais ceci n'a pas reellement d' impact sur le poids des fichiers, contrai- 
rement aux idees recues. En effet, les algorithmes traitent essentiellement des images-cles 
par nature insensibles a une variation legere de la cadence des images, sauf pour des mou- 
vements reellement tres marques. Dans ce cas, le nombre d' images-cles devient plus impor- 
tant et leur iteration plus serree sur l'echelle du temps. Une modification importante de la 
cadence peut sans doute, dans ce cas, alleger un peu le poids d'une video. 

Mais independamment du poids des videos, la cadence agit surtout sur les performances 
d'affichage de la carte graphique. Plus il y a de variations a gerer dans un meme temps 
donne, plus le processeur video est sollicite. 

Si la video est importee physiquement dans le scenario de Flash, sa cadence doit etre iden- 
tique a celle de la video. En revanche, si la video est stockee en dehors de 1' animation Flash, 
et que celle-ci est affichee dynamiquement dans Flash a l'aide du composant FLVPlayBack 
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ou avec les commandes de la classe NetStream, sa cadence peut etre differenciee. 
Lorsqu'une video est importee dans Flash, si la cadence est differente de celle du scenario, 
le son, les animations et les actions risquent en effet d'etre desynchronises par rapport a 
T image. 

Combien de videos en simultane ? II est possible de multiplier les couches de fichiers 
video au sein d'une meme animation Flash, mais preferez les rassembler autant que possible 
dans un seul fichier video. Vous gagnerez en fluidite. 

Quelles dimensions pour une bonne image ? A debit equivalent, plus la video occupe de 
la surface a l'ecran, plus la compression devra etre forte. Pour compenser le poids induit par 
les dimensions de la video et stabiliser le debit, preferez reduire les dimensions des videos, 
vous obtiendrez un meilleur rendu. Dans Flash, les videos ne requierent pas d'etre impor- 
ters dans un format standard de ratio 4/3 ou 16/9 par exemple. Les videos peuvent etre reca- 
drees avant l'encodage, de sorte que seule la surface utile a coder soit traitee sous la forme 
d'un signal video utile. Par exemple, pour afficher un personnage qui marche en direction 
de l'utilisateur, une video de forme rectangulaire verticale peut largement suffir. Le reste du 
decor sera traite en image fixe, reparti sur d'autres caiques, dans Flash. Pour laisser voir le 
decor derriere le sujet filme, il suffira de l'exporter avec une couche transparente (alpha) et 
de l'enregistrer au format FLV avec les options ON2 VP6 et canal alpha activees. 

Images fixes ou en mouvement ? Plus la video est riche d'un point de vue graphique (nous 
disons qu'elle possede du bruit), plus son poids sera consequent, car c'est ce qui bouge qui 
est code dans les algorithmes de compression. Ne rendez mobile que ce qui est utile ou 
alors, privilegiez les animations courtes. 

II est possible, dans certains logiciels de montage video, de reduire le bruit sans trop alterer 
1' image. Etudiez cette option qui peut reduire considerablement la perte de qualite a l'enco- 
dage, ou, a qualite egale, reduire grandement le poids de la video. 

Capturer en standard ou en HD ? Pour realiser des montages video simples, sans detou- 
rage ni incrustation, une capture standard suffit (PAL 4/3 758 x 576). Mais si vous souhai- 
tez realiser des trucages avances, tels que le detourage d'un sujet capture sur fond vert, 
preferez une image haute definition (1 080 lignes), dont le nombre de points et la qualite de 
compression aideront a afhner le detourage, avant de reduire l'image ensuite a l'exportation 
vers Flash. 

Quel que soit le format de capture, songez que la video doit etre contenue, au final, dans une 
fenetre de navigateur de surface utile de 980 pixels par 550 pixels. 

La lecture est-elle instantanee ? II faut compter une mise en cache de quelques secondes 
avant que la video ne puisse etre jouee lorsqu'elle est diffusee sur le Web. Prevoyez cela 
dans la scenarisation de votre document Flash. Cette propriete peut toutefois etre controlee 
par ActionScript 

Integrer ou non les videos dans le Flash ? La video pour le Web est de preference exter- 
nalisee par rapport au document Flash qui s'y refere. C'est le Flash qui fait reference au 
fichier video via une instruction ActionScript. Cela permet d'alleger considerablement le 
poids du document Flash et en simplifie la maintenance. En outre, la video peut etre lue a 
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mesure de son chargement, ce qui n'est pas le cas d'un document qui integre physiquement 
la video. 

Lorsque la video est incluse physiquement dans le Flash, il faut en effet attendre le charge- 
ment complet du Flash avant de pouvoir lire le debut de la video. A quelques exceptions 
pres (que nous abordons au Chapitre 8, section "Lire une video en arriere"), la video est 
toujours externalisee. 

Une video chargee dans le scenario implique egalement la recompilation du film a chaque 
publication, ce qui prend en outre beaucoup de temps. 

Le format video de Flash peut-il etre lu sans Flash ? Le Flash gere les formats video FLV 
(version 6 et ulterieur) et F4V (version 10 et ulterieur), voire certains formats QuickTime. 
Mais les videos Flash ne sauraient etre lues independamment du document Flash qui les 
accompagne, car c'est lui qui contient le lecteur en mesure de gerer ce format. Quelques 
applications toutefois savent lire les formats video Flash, comme le lecteur VLC, Real, 
Bridge et certaines versions de Quick Time. Le format F4V, que nous detaillons au Chapi- 
tre 7, est plus permissif cela dit que le FLV, du fait de son type de compression, base sur le 
H-264. 

Source compressee ou non compressee ? Preferez toujours exporter au format video de 
Flash a partir d'une source non compressee. Les videos deja compressees utilisent des algo- 
rithmes qui peuvent generer des parasites dans la video de sortie. Une video non compressee 
demeurera toujours de meilleure qualite au premier encodage. 

Quelle configuration pour lire une video sur le Web ? Pour lire une video geree via 
Flash, sur le Web, l'utilisateur requiert au moins l'ADSL ou une connexion Cable, un lec- 
teur Flash de version 6 pour les videos FLV basiques, de version 8 pour les videos FLV 
composites avec alpha, et de version theoriquement superieure a 10 pour la video haute 
definition avec le format F4V. Dans tous les cas, une bonne carte video est souhaitable, 
superieure ou egale a 64 Mo. En dessous de 64 Mo, les flux videos paraitront parfois sacca- 
des pour des tailles meme raisonnables. En dessous de 32 Mo, elles paraitront saccadees 
quelle que soit leurs dimensions, meme en reduisant la cadence a 12 ou 15 images par 
secondes. 

Quelle difference entre un flux continu et un chargement progressif ? Laffichage d'une 
video a chargement continu est traite a partir d'un serveur de streaming (litteralement, 
d' envoi de flux) qui fait varier la quantite et la qualite des donnees en fonction de la bande 
passante disponible, dynamiquement. Les paquets de donnees videos etant traites dynami- 
quement, ce systeme permet de modifier la nature du contenu selon la configuration et les 
interactions de l'utilisateur. Cette technique permet ainsi la diffusion d'emissions en direct 
et l'envoi d'un signal plus ou moins compresse selon la configuration materielle du poste 
utilisateur. Le traitement d'un signal continu via Flash implique une solution serveur telle 
que Flash Media Server. 

Une video a chargement progressif est un fichier deja enregistre au format FLV ou F4V. Le 
lecteur Flash la copie dans le cache du navigateur et lit la video, a mesure de son charge- 
ment. Le traitement d'un flux en chargement progressif ne permet pas le direct, mais reste 
tres simple a deployer, car aucun serveur specifique n'est requis pour lire la video. C'est 
cette derniere technique que nous utilisons dans cet ouvrage. 
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Quelle difference entre un fichier FLV et un fichier F4V ? Le FLV propose une compres- 
sion forte au detriment de la qualite, mais il autorise une implementation souple a l'interieur 
d'une mise en forme graphique composee de multiples caiques. Cela en favorise l'interacti- 
vite. Le FLV encode en On2VP6 autorise par ailleurs la transparence. Etant disponible 
depuis Flash 6, il apporte egalement une grande compatibilite. 

Le format F4V utilise une compression HD (codec H-264). II est utilise pour l'affichage de 
presentations video lineaires et qualitatives (bandes-annonces, teasers, produits de luxe, ani- 
mations 3D avec de la radiosite). Une video F4V est theoriquement seulement compatible 
avec Flash 10 et ulterieur, mais nous demontrons qu'elle peut etre lue depuis une version 
plus ancienne au chapitre suivant. Ce format est privilegie pour les presentations haut de 
gamme et pour une cible bien identifiee qui sera equipee pour acceder a ce type de contenu 
(qui dispose d'un lecteur Flash recent et d'une bonne carte video). 



Composition simple avec Apple Motion 

Apple Motion est un logiciel de trucage video et d'effets speciaux inclus dans la suite Final 
Cut Studio d'Apple. Cet outil permet de realiser, entre autres, des habillages graphiques et 
animes a partir de formes vectorielles, d'images bitmaps, de particules generees dynami- 
quement et de sequences video. II est utilise en television pour les habillages d'emissions, 
pour l'interfacage de DVD et depuis peu pour le Web ou il apporte une vraie touche graphique 
grace notamment a son puissant moteur de generation de particules et d' acceleration. 

Dans cette section, nous allons voir comment exporter, depuis Motion, une animation de 
particules deja predefinie, dans un format compatible avec l'encodage pour Flash (voir 
Figure 6.1). Dans cet exemple, l'animation de particules illustre l'eclat d'un feu d'artifice. 
Nous l'encoderons plus tard, avec sa transparence, pour Flash, et la placerons au-dessus 
d'une interface. 

Figure 6. 1 

Apercu de la 
video Apple 
Motion apres 
publication. 
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Exemple; videoMotion > particules motn 

L' animation de particules que nous presentons ici est integree au logiciel Apple Motion. 
Pour les lecteurs qui ne disposeraient pas de 1' application, une version exportee au format 
Quick Time est accessible dans le repertoire "videoMotion" des exercices du livre et se 
nomme "particules.mov". Vous pouvez directement passer a la section sur l'encodage si 
vous souhaitez integrer des contenus videos FLV dans Flash. 

Pour creer une animation video de particules avec de la transparence, pour Flash et avec 
Motion, procedez comme suit : 

1. Lancez 1' application Apple Motion. 

2. A l'ouverture, une boite de dialogue de creation de nouveau projet apparait (voir 
Figure 6.2). Dans le menu Prereglages, selectionnez 1' option Personnaliser. . . 



Figure 6.2 

Fenetre de 
nouveau projet 
dans Motion. 



Selectionnez le prereglage du projet 



Prereglage : ' Multimedia-petit format 



"Tl ( Par defaut ) 



UtSsez ce prereglage pour des projets CD-ROM a fable 
debit ou d'autres projets multimedia, avec une resolution de 
160 x 120. 

Duree : 300 images 



Creer lei nouveaux documents avec les parametres par defaut 
( Annuler ) ( OK ) 



3. La fenetre de Proprietes du projet apparait (voir Figure 6.3). 



Figure 6.3 

Fenetre de 
Proprietes du 
projet dans 
Motion. 



| Generates j Reglages de rendu | 



Description du projet : 



Prereglage : Personnaliser 



Hauteur : 510 



Profondeur de bits : f 8 bits 



Proportions pixel : ' Carre 



Ordre de trame i ' Aucune 



□ Diffuser 



Frequence d'images : 25,00 |~*~] ips 
Duree : 1 110 | [ Inn 

Tlmecode debut : 00:00:00:00 



Couleur d'arriere-plan : 



ED 



Arriere-plan : f Transparent 



La couleur d'arriere-plan est visible dans le 
canevas mais nt donne aucun rendu en tant 
qu'element de la composition. 



4. Configurez un projet de resolution de 800 pixels de haut sur 530 pixels de large (ce qui 
correspond a notre surface de travail dans le document Flash), code sur 8 bits (a savoir 



La video standard et composite en FLV 



143 



la profondeur disponible sur les ecrans informatiques tout public), de proportions de 
pixels Carre (soit un ratio de 1,00), sans trame. L'exemple que nous utilisons dure envi- 
ron 1 10 images (duree de l'animation predefinie) et nous le cadencons a 25 images par 
secondes (25 ips, cadence standard pour la video PAL en Europe). Nous selectionnons 
enfin un arriere-plan de type Transparent, pour permettre plus tard la superposition de la 
video avec d'autres elements graphiques, au sein de 1' application Flash. 

Dans le nouveau projet, a gauche, figure la fenetre Navigateur (voir Figure 6.4). Au centre, 
nous pouvons voir l'espace de travail, la scene. En haut, differents menus donnent acces a 
des effets qui peuvent etre appliques au contenu. 




Figure 6.4 

Fenetre Navigateur. 

Dans la fenetre Navigateur, vous pouvez identifier trois onglets : Navigateur, Bibliotheque 
et Inspecteur. Le Navigateur donne acces aux fichiers et dossiers de votre systeme. La 
Bibliotheque met a disposition un certain nombre d'objets predefinis et prets a l'emploi. 
LTnspecteur, lui, affiche toutes les options de controle disponibles pour l'objet active dans 
la scene (comme 1 'Inspecteur de proprietes de Flash). 

Cliquez sur l'onglet Bibliotheque. Puis, dans la partie inferieure, selectionnez le repertoire 
Emetteur de particules. Dans la colonne de droite, selectionnez maintenant le dossier Etin- 
celles. Puis, dans la partie inferieure de la fenetre, cliquez sur 1' animation predefinie nommee 
"Surprise Shimmer" (voir Figure 6.5). 

Un apercu de l'animation est disponible au sommet de la fenetre Navigateur. En bas de 
l'ecran, verifiez que la tete de lecture du scenario est bien situee au debut de l'animation 
(voir Figure 6.7). 
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Figure 6.5 

Selection d'une 

animation 

predefinie. 
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Figure 6.7 

Fenetre 
de scenario. 
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Glisser-deposez 1' animation selectionnee de la fenetre Navigateur vers le centre de la scene 
(voir Figure 6.7). Puis, appuyez sur la barre d'espace pour tester 1' animation. 



Un scintillement d'etoiles s'anime dans la scene courante. L' animation fonctionne. Vous 
pouvez enregistrer le document de travail et 1' exporter vers un format compatible pour 
l'encodage Flash. 

Faites Fichier > Enregistrer. Puis, confirmez l'enregistrement du document Motion au for- 
mat natif (.mtn) dans le dossier de votre choix. Par exemple, dans le repertoire Sources ou 
dans le dossier videoMotion des exercices du livre. Ce fichier natif ne sera pas mis en ligne. 
II servira uniquement a modifier eventuellement votre creation avant de V exporter a nouveau 
dans un format aplati et compatible. 

Vous pouvez maintenant exporter la video pour le Web. 

Dans Motion, il n'y a pas d'exportation directe au format Flash FLV ou F4V. Pour encoder 
la video au format Flash, nous utilisons 1' application Adobe Media Encoder. Mais, pour ce 
faire, nous devons d'abord exporter la video dans un format standard, aplati et qui preserve 
la transparence. Nous choisissons de 1' exporter au format usuel Animation de Quick Time : 

1. Faites Fichier > Exporter. Puis, dans la boite de dialogue, nommez la video Particules. 
Plus bas, dans le menu Exporter, choisissez Quick Time. A droite, cliquez sur le bouton 
Options (voir Figure 6.8). 

2. Dans les options d'exportation, choisissez une compression de type Animation en pre- 
servant au maximum la qualite de l'animation (voir Figure 6.9). Vous remarquez, dans 
le detail des parametres de compression a droite, que la couche alpha est automatiquement 
integree dans ce format. Validez toutes les fenetres. Puis, quittez 1' application. 



Figure 6.7 

Animation 
deposee. 



■ 
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Figure 6.8 

Fenetre Exporter. 
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( Annuler ) ( Exporter ) 



Figure 6.9 

Options 

de compression. 



Options d exportation 



Norn : Film - reglages projet & canevas 
Description : 



[ Vtdeo/Audio ) Sortie | 



Type : I Sequence QuickTime 



Compresseur : ' Animation 
Qualite : ! 



-01 



N* de debut : 0 _ Ajouter des e spaces 

( Avarvce... ) 

Audio 



Lchaniillonnage : 48 kHz 



3 



Mixage : f Stereo 



Avance... 



( Enregistrer ) f Enregistrer sous-. ) 



Type 


Sequence QuickTime 


Compresseur 


Animation 


Prof, de couleur 


Millions de couleurs* 


Qualite 


MM 


Freq. d'images 


2S ips 


Freq. img cles 


0 


Echantillonnage 


48.000 kHz 


Format echant. 


16 


Canaux 


2 


Resolution 


Heine (800 x 530) 


Couleur 


Couleur + alpha 


Premultiplie 


Active 


Appareil photo 


Camera activee 


tclairage 


Active 


Qualite de rendu 


Normale 


Rendu de trame 


Desactive 


Flou d'animatlon 


Des active 


Fusion d'images 


Active 


Bits en virg. flot. 


Desactive 



( Annuler ) 



La video est maintenant exportee au format Quick Time et peut etre encodee pour Flash 
avec Adobe Media Encoder. Reportez-vous, plus loin dans ce chapitre, a la section consacree a 
l'enregistrement avec l'encodeur Adobe pour publier la video au format Flash FLV. 

Un autre exemple est disponible dans le dossier des exemples du livre et se nomme 
"galaxie.mov". Le fichier Motion associe se nomme "galaxie.mtn". 
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Encoder en FLV avec Apple Compressor 

Compressor est livre en standard dans la suite Final Cut Studio de Apple. Pour les utilisateurs de 
Compressor, vous pouvez encoder au format Flash video directement depuis le logiciel Compressor. 
Vous devez, depuis Compressor, exporter la video au format Quick Time, et dans les options d'enco- 
dage du format Quick Time, selectionner le format FLV 




A retenir 

■ Apple Motion permet d'exporter au format Flash video FLV avec de la transparence, a condition de 
le publier d'abord au format Quick Time Animation, puis de I'encoder ensuite avec I'encodeur 
Adobe au format FLV 

■ Apple Motion complete Adobe After Effects en cela qu'il integre un puissant moteur d'interpolation 
des images et un bon generateur de particules. 

■ Les videos Apple peuvent egalement etre exportees via Compressor pour Flash, avec le meme para- 
metre d'exportation Quick Time pour I'animation, mais I'option FLV est ici disponible. 



Composition simple avec Adobe After Effects 

Comme nous l'avons vu avec Motion, nous allons voir comment exporter une animation 
simple realisee ici avec After Effects, pour Flash. 

After Effects est un logiciel de composition et d'effets speciaux, disponible dans la suite 
video Adobe. Ce logiciel, similaire a Motion, permet de realiser des animations spatiales 
en 3D de maniere plus avancee que Motion puisqu'il peut integrer des objets modelises en 
3D, mais il ne dispose pas d'un moteur de particules aussi gratifiant. Les deux applications 
se completent done assez bien dans la production d'effets visuels. II est a ce titre possible 
d' importer une video realisee par Motion dans After Effects et inversement, pour l'enrichir 
des fonctionnalites de 1' autre application. 

Dans cette section, nous allons voir comment creer une animation et la publier directement 
au format FLV ou F4V pour Flash, depuis After Effects. 



Exemples > videoAfterEffects > flocons.aep 



Pour les lecteurs qui ne disposeraient pas de l'application After Effects, une version expor- 
ted de la video est disponible dans le repertoire videoAfterEffects et se nomme flocons.mov. 
L' animation que nous allons etudier represente une pluie de flocons de neige deja mise en 
forme. Mais avant d'ouvrir ce document, nous allons voir comment configurer un projet 
After Effects pour Flash : 

1. Pour creer un document After Effects pour le Web, lancez l'application After Effects. 

2. Au demarrage de l'application, une fenetre d'accueil apparait (voir Figure 6.10). 
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Figure 6.10 

Fenetre d'accueil 
d'After Effects. 



Bienvenue dans Adobe After Effects 


AE 

ADOBE AFTER EFFECTS CS4 







Conseil du jour : 45 



Pour afficher des prophetes de transformation 
specifiques d'un caique selectionne dans le panneau 
Montage, utilisez les touches de raccourci suivantes A 
(Point d'ancrage). P (Position). S (Echelle), R (Rotation) et 
T (Opacite). Si aucun caique n'est selectionne. les 
propnetes sont affichees pour tous les caiques. 



3. Cliquez sur Nouvelle composition pour creer une nouvelle sequence de video composite. 

4. Une boite de dialogue apparait (voir Figure 6.1 1). 



Figure 6.1 1 

Parametres de 
composition. 



Parametres de composition 



Norn de la composition QQQQ^^QQ 

Simple 

Parametre predefini : Personnalise 
Largeur : px 

— Verrouille 

Hauteur : .530 px 
Format des pixels : Pixels carres 

Images/s : j j images par seconde 



Format des images 
80 53 (1.51) 



Resolution : Integrate ▼ 800 > $30. 1.6 Mo par image 8 bpc 
Code temporel initial : ^Q^ZX^I Base 2S 

Duree : I'H'I'fH'H'I'B = 0 00 20:00 Base 2 S 




5. Dans la boite de dialogue des parametres de la nouvelle composition, specifiez une 
configuration personnalisee de largeur 800 pixels et de hauteur 530 pixels (dimensions 
disponibles dans notre document Flash). Puis, choisissez un format de pixels carres et 
une cadence a 25 ips, comme vu precedemment avec Motion. Specifiez enfin une duree 
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souhaitee en secondes. Par exemple, pour une sequence d'une duree de 20 secondes, 
inscrivez 0:00:20:00 dans le champ correspondant. Validez. 

After Effects affiche une nouvelle composition (voir Figure 6.12) basee sur des pixels car- 
res. Vous pouvez realiser vos effets, importer des medias, multiplier les caiques et animer 
les proprietes. 



,. D - -- : □ ■■. - 

Nouvelle 

composition. 




Dans le dossier des exemples du livre, une animation de flocons est deja realisee. Nous 
allons l'ouvrir pour l'exporter directement au format video de Flash. Ouvrez le projet After 
Effects intitule "flocons. ape", enregistre au format natif dans le dossier " video AfterEffects". 

Dans ce document (voir Figure 6.13), un solide est place sur la scene et utilise un effet de 
particules (Effets > Simulation > CC Particles Systems II). L' effet neutralise le solide, mais 
1' utilise pour exister en tant qu'objet dans le scenario. Les options des effets sont accessi- 
bles dans le scenario et dans la fenetre Effets (Fenetre > Effets) et l'animation de fondu en 
sortie (fondu au noir) est materialisee dans le scenario avec des images-cles appliquees a la 
propriete Opacite. 

Pour exporter la composition directement au format video de Flash, activez d'abord la 
sequence a exporter en cliquant sur la scene (oil Ton apercoit la video). Faites Fichier > 
Exporter > Flash Video FLV... Un message vous avertit que vous disposerez de plus 
d' options de controle en exportant depuis la fenetre de rendu de After Effects. L export via 
le menu Fichier utilise en effet une ancienne version de l'encodeur Flash video, mais tout a 
fait conforme aux besoins d'une video composite de base, avec alpha, et compatible 
Flash 8. Nous reviendrons sur les autres options dans la section "Echantillonner la video 
pour Flash". 
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Figure 6.1 3 

Composition 
flocons.aep. 




Validez pour confirmer l'enregistrement. 

Dans la boite de dialogue, vous pouvez acceder a differentes options d'echantillonnage 
(voir Figure 6.14), mais limitees. 

Dans la liste des compressions predefinies situee dans la partie inferieure de la fenetre, vous 
accedez a differents formats d'encodage plus ou moins compatibles avec d'anciennes ver- 
sions du lecteur Flash. Seuls les formats compatibles Flash 8 autorisent l'encodage de la 
couche alpha qui preserve la transparence de la video dans Flash. 



Figure 6.14 

Parametres 
d'encodage des 
videos Flash. 




00:00:00.000 



Profils Video Audio Points de repere Recadrer et redimensionner ' 



Veuillez selectionner un profil de codage pour les videos Flash : L3 1 B | 
I Flash 8 - Qualite moywme (400 Kbils/s) 

Video codee pour une lecture a I'alde de Flash player 8 ou ulterieur 
Video : OnZ VP60n2 VP6 

Audio : MPEG Layer III (MP31MPEC Laver III IMP3) (stereo) 



Nom du fichier de sortie 



^Annuler^ f Ot 1 
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Pour un encodage qui autorise la transparence, selectionnez Flash 8, dans la liste derou- 
lante. Puis, adaptez votre choix selon l'option qui correspond le mieux a la bande passante 
definie pour votre cible. Reportez-vous au Tableau 6.1 pour connaitre les valeurs a selec- 
tionner en fonction de votre cible. 



Tableau 6.1 : Compression et debit. 
Debit 



Compression 



Utilisateurs Modem 56k 
Utilisateurs ADSL 1 

Utilisateurs ADSL 2 (majorite des utilisateurs) 
Utilisateurs Super ADSL, Cable, fibre optique 

Utilisateurs locaux (non connectes, lecture en locale sur le poste utilisateur, 
CD, DVD) 



Pas de signal video fluide. 
400 kbps. 
700 kbps. 

2 048 kbps a 4 096 kbps. 
> 4 096 kbps. 



Dans la categorie Video (voir Figure 6.15), cochez l'option Coder le canal Alpha, puis 
validez. 



Figure 6.1 5 

Coder le canal 
Alpha. 



Parametres de codage des videos Flash 




00:00:00.000 



Profils Video Audio 



Recadrer et redimensionner 



& Coder les donnees video 



Codec video : ' On2 VP6 



Qualite : Elevee 



r?f Coder le canal alpha 
G Desentrelacer 

Cadence : dentique a la source ^ 'P 5 



Debit de donnees max. : 700 Kbits par seconde 



Positionnement des images-cles : Automatique 
Intervalle des images-cles : 



images 



( Annuler ^ ( OK ) 



La fenetre d'enregistrement apparait. Nommez la video flocons.flv, par exemple, puis validez 
(voir Figure 6.16). 
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Figure 6.1 6 

Enregistrer la 
video au format 
FLV 



r> o r> 



Enregistrer 



Enregistrer sous : flocons.flv 
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La video est enregistree au format FLV. Vous pouvez l'integrer dans Flash. 

Pour le descriptif detaille des options de compression du format FLV, reportez-vous a la sec- 
tion suivante. Pour savoir comment enregistrer pour Flash depuis d'autres logiciels video 
(Final Cut Pro, Premiere Pro, mais aussi iMovie ou Window Movie Maker), reportez-vous 
au Chapitre 7. 

Trucage avec captation sur fond vert 

Si vous savez exporter une video avec la couche alpha, vous savez aussi integrer un sujet capture sur 
fond vert. Pour realiser une incrustation avec fond vert, relevez ce qui suit : 

■ Lors de la captation, veillez a obtenir un fond dont la couleur n'est pas specifiquement verte, mais 
dont la teinte s'oppose en toutes circonstances a celle du sujet capture. 

■ Utilisez un fond sans asperite et regulier, qui reflechisse bien la lumiere en direction de la camera 
et sans creer d'ombre ni laisser apparaitre de plis. 

■ Rendez le fond homogene en I'eclairant sous plusieurs angles avec des lumieres diffuses. II ne 
doit pas y avoir de halo ou de zone moins exposee qu'une autre. Attention, une lumiere trap 
forte genere un halo jaune (image brulee). 

■ Eclairez le sujet pour compenser le contre-jour que vous obtenez avec un fond expose. Preferez un 
eclairage indirect du sujet, pour eviter I'apparition au sol ou sur le fond vert, d'ombres portees. 

■ Effectuez ensuite, si possible, un enregistrement en haute definition, avec de bonnes optiques, 
en image progressive et avec la compression la moins forte possible (done, surtout pas en DV ni 
en HDV qui sont des formats tres compresses), de sorte a restituer un pique d'image le plus fin 
possible. Cela facilitera le detourage dans le logiciel de compositing. 
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Pour detourer un fond vert, dans After Effects, vous pouvez utiliser les effets Keying > Keylight ou 
les effets du menu Effets > Correction colorimetrique, et les degrossir par exemple avec un mas- 
que (pour supprimer d'abord les bords du cadre, les cablages qui entrent dans le champ, etc.). 
Dans Motion, degrossissez de meme avec un masque et utilisez Ajouter un filtre > Incrustation > 
Ecran bleu ou vert pour le detourage. 

Reduisez eventuellement I'echelle de I'image, apres le detourage bien sur, juste avant de I'enco- 
der au format video de Flash. 

Encodez au format FLV avec I'option Coder le canal alpha. 



Exporter le projet After Effects natif directement vers Flash 

Si la composition After Effects doit utiliser des objets que vous souhaitez rendre interactifs dans Flash, 
vous pouvez exporter ces contenus directement vers Flash, sans rendre ni aplatir la video. Faites 
Fichier > Exporter > Exporter au format Flash Professionnel XFL Puis, depuis Flash, ouvrez le docu- 
ment XFL et enregistrez la composition au format FLA. Attention, tous les effets ne sont pas toujours 
bien interpretes. De plus, si des calculs doivent etre appliques a des animations de videos, un rendu 
sera malgre tout necessaire avant de pouvoir importer le projet dans Flash. Le document Flash 
obtenu integre physiquement la video, ce qui en limite naturellement I'exploitation puisque nous 
savons qu'elle est mieux geree en externe. Pour de plus amples informations neanmoins sur ces pas- 
serelles, consultez le livre D'After Effects a Flash / De Flash a After Effects, de Richard Harrington et 
Marcus Geduld, publie aux editions Pearson, particulierement adapte aux utilisateurs de Flash qui 
souhaitent par ailleurs apprivoiser After Effects. 



A retenir 

■ Adobe After Effects offre une bonne transversalite avec Flash et permet d'exporter facilement au for- 
mat FLV avec de la transparence. 

■ II est possible d'exporter une composition After Effects directement vers Flash sans calcul de rendu, 
si les objets animes I'autorisent. 



Echantillonner la video pour Flash 

Dans cette section, nous abordons l'encodage de fichiers video, a partir d'une source deja 
enregistree (Quick Time, AVI, DV, etc.) ou depuis une application standard de creation de 
contenu video. Parmi celles-ci, nous abordons les solutions professionnelles des suites 
Adobe et Apple avec After Effects, Premiere Pro et Final Cut Pro, ainsi que les solutions 
embarquees sur les systemes Mac et PC avec iMovie et Window Movie Maker. 

A Tissue de ce chapitre, vous serez en mesure de convertir tout type de montage video en 
format de fichier video pret a etre integre a Flash. 
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Encoder en FLV avec After Effects 

After Effects possede la meme fenetre de compression que celle disponible dans l'encodeur 
Adobe : 

1. Pour l'ouvrir, faites Composition > Compiler le film. 

2. Lors du premier enregistrement, After Effects demande d'enregistrer au format Quick 
Time. Dans ce cas, confirmez. Rien ne se produit. Puis revenez dans la file de rendu en 
faisant, de nouveau et si necessaire, Composition > Compiler le film. 

3. La file d'attente de rendu apparait. 

4. Dans la file de rendu, cliquez sur le lien jaune intitule Module de sortie non destructif. 

5. Dans le menu Format de la nouvelle boite de dialogue, choisissez FLV. 

6. Puis, dans Sortie video, cliquez sur Options de format. 

Reportez-vous ensuite a la section "Encoder avec Adobe Media Encoder" pour le detail des 
reglages. 

Encoder en FLV avec Premiere Pro 

Dans Premiere Pro, il est possible d'exporter plus directement au format video de Flash : 

1. Faites Fichier > Exportation > Medias. 

2. Puis, en haut et a droite, dans la fenetre de dialogue, dans le menu Format, choisissez 
FLVIF4V. 

3. Dans l'onglet Multiplexeur enfin, cochez 1' option FLV. 

Reportez-vous ensuite a la section "Encoder avec Adobe Media Encoder" pour le detail des 
reglages. 

Encoder en FLV avec Final Cut Pro 

Avec Final Cut Pro, vous devez d'abord enregistrer la video dans un format standard avant 
de 1' encoder avec Adobe Media Encoder ou Compressor. 

1 . Faites directement Fichier > Exporter > Exporter via la conversion Quick Time. 

2. Puis, dans les options de reglage video de Quick Time, choisissez Animation. 

3. Confirmez 1' enregistrement au format Quick Time. 

Reportez-vous ensuite a la section "Encoder avec Adobe Media Encoder" pour convertir un 
fichier Quick Time en FLV. 

Encoder en AVI-DV avec Window Movie Maker 

Sur Windows, avec Window Movie Maker, vous pouvez publier au format Window Media 
ou AVI. Nous utilisons le format AVI avec le codec DV pour une compatibility transversale 
avec la suite Adobe. 
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1 . Une fois votre montage realise, faites Fichier > Enregistrer le fichier video. 

2. Puis, choisissez de l'enregistrer sur votre poste de travail. 

3. Confirmez son nom et 1' emplacement de l'enregistrement. 

4. Puis, dans les options de configuration, selectionnez l'option Autres parametres et choi- 
sissez le format DV-AVI (PAL). Validez l'encodage. 

Le fichier video obtenu peut etre maintenant encode avec Adobe Media Encoder. 

Encoder en MOV ou DV avec iMovie 

Dans iMovie, vous pouvez acceder directement aux elements sources des sequences captu- 
rees, avant montage, dans leur format natif. lis sont disponibles directement dans le systeme 
(Finder). 

1. Sur chaque plan disponible dans iMovie, faites un clic-droit (ou Ctrl+Clic) puis, selec- 
tionnez l'option Afficher dans le Finder. 

2. Vous pouvez aussi exporter le montage dans un format compatible avec l'encodeur 
video Adobe. Faites Exporter > Exporter a l'aide de Quick Time. 

3. Puis, dans les options de reglage video de Quick Time, selectionnez le format Ani- 
mation. 

Reportez-vous ensuite a la section "Encoder avec Adobe Media Encoder" pour convertir un 
fichier Quick Time en FLV. 

Encoder en FLV avec Adobe Media Encoder 

Quel que soit le logiciel de montage ou de trucage video employe pour creer le fichier 
video, et meme si ce logiciel ne vous offre pas la possibility d'exporter la video directement 
au format Flash, vous pouvez l'encoder avec Adobe Media Encoder. Cet utilitaire d'enco- 
dage de medias est livre dans la suite Adobe et disponible dans vos programmes, meme si 
vous n' avez installe que Flash. 

L'encodeur offre, en plus des formats video requis pour Flash, tous les formats video et 
audio que d' autres applications eventuellement installees sur votre machine peuvent propo- 
ser. Ainsi, si vous avez installe toute la suite video de Adobe, vous aurez acces, a travers 
l'encodeur, aux codecs distribues par ces autres applications. II en va de meme avec 
1' ensemble des codecs distribues par la suite Apple. 

Les reglages dont nous disposons a travers l'encoder Adobe sont identiques a ceux disponi- 
bles depuis les autres logiciels de la suite. En etudiant les reglages dans cette section, vous 
serez done en mesure d'utiliser aussi les options d'exportation avancees des logiciels Pre- 
miere Pro et After Effects pour les formats video de Flash FLV et deja une partie de l'enco- 
dage pour le format F4V. 
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Les formats pris en charge par Adobe Media Encoder 

Les formats pris en charge par I'encodeur sont designes par leurs codec de compression et non 
par leur extension. Dans un format video, nous distinguons la coquille de la video (Quick Time, 
AVI) et le format d'encodage du fichier contenu dans I'enveloppe video elle-meme (Animation, 
H-264, DV). C'est la raison pour laquelle Flash peut parfois interpreter des fichiers Quick Time 
sans encodage specifique supplemental, si I'encodage utilise est identique a celui d'un fichier 
FLV ou F4V 

Si I'encodeur Adobe gere differents formats, il n'autorise pas toutes les options d'encodage pour 
I'ensemble de ces formats. Le format le plus ouvert reste le format QuickTime (MOV) avec une com- 
pression de type Sequence animee (Animation). 

Voici la liste des formats pris en charge par I'encodeur Adobe : 

■ Video. 3G2, GIF anime (GIF), DLX (Sony, Windows uniquement), DV (dans un conteneur MOV 
ou AVI), FLV F4V M2T (Sony HDV), QuickTime (MOV), MP4 (XDCAM EX), Formats MPEG-1, MPEG-2 
et MPEG-4 (MPEG, MPE, MPG, M2V MPA, MP2, M2A, MPV M2R M2T, AC3, MP4, M4V M4A). 
Certains formats de donnees MPEG sont enregistres dans des conteneurs dont le format n'est pas 
reconnu par Adobe Media Encoder : les extensions .vob et .mod sont notamment concernees. 
Dans certains cas, vous pouvez modifier I'extension des fichiers afin de les importer dans Adobe 
Media Encoder sous un format reconnu. MTS (AVCHD), Media exchange Format (MXF). Unique- 
ment certains types (une variante Op-Atom utilisee par les camescopes Panasonic DV DVCPRO, 
DVCPRO50 et DVCPRO HD pour les enregistrements sur support Panasonic P2). Adobe Media 
Encoder peut egalement importer des fichiers XDCAM HD au format MXF Netshow (ASF Win- 
dows uniquement), Video pour Windows (AVI, WAV ; requiert QuickTime sous Mac OS), ne peut 
pas importer de fichiers video DivX®, ni de fichiers AVI codes avec DivX. WMV (WMV WMA, ASF ; 
Windows uniquement). 

■ Audio. Fichier Adobe Sound (ASND), AAC (Advanced Audio Coding, M4A), AIF AIFF [Audio Inter- 
change File Formal], AVI [Audio Video Interleaved], WAV [Audio WAVeform), MP3 (MP3, MPEG, 
MPG, MPA, MPE), MOV Windows Media Audio (WMA, Windows uniquement), Video pour Win- 
dows (AVI, WAV requiert QuickTime sous Mac OS X). 

■ Images fixes. Adobe Media Encoder prend en charge les fichiers d'images fixes 8 bits par canal 
(4 octets par pixel) et 16 bits par canal (8 octets par pixel). II convertit les images de resolution 
inferieure en 8 bits par canal et cedes de resolution superieure en 1 6 bits par canal lors de I'impor- 
tation. Les fichiers a resolution elevee sont pris en charge a une seule virgule flottante en simple 
precision par canal (16 octets par pixel). Adobe Photoshop et sequence Photoshop (PSD), Bitmap 
et sequence Bitmap (BMR DIB, RLE), GIF Fichier icone (ICO) (Windows uniquement), JPEG et 
sequence JPEG (JPE, JPG, JFIF), PICT et PICT (PIC, PCT), Portable Network Graphics (PNG), Targa 
et sequence Targa (TGA, ICB, VDA, VST), TIFF et sequence TIFF (TIF). Vous pouvez importer des 
fichiers Illustrator et Photoshop a caiques sous forme de sequences. 

■ Montages aux formats natifs. Adobe Premiere Pro (PRPROJ), Projet After Effects (AEP). 

Pour encoder tout type de video au format Flash FLV (ou F4V), lancez 1' application Adobe 
Media Encoder (voir Figure 6.17). 
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Figure 6.1 7 

Adobe Media 
Encoder. 



Cette application gere, dans la partie superieure, une liste de documents a encoder. Dans la 
partie inferieure, nous pouvons voir la progression de l'encodage pour chaque fichier rendu 
individuellement. Puis, a droite, des options de reglage qui permettent de personnaliser la 
compression (dimensions, debit, transparence, etc.). 

Pour encoder une video, vous devez l'ajouter dans la liste de rendu. Pour cela, cliquez sur le 
bouton Ajouter, situe a droite ou bien glisser-deposez directement le fichier pret a encoder 
dans la file de rendu, situee dans la partie superieure de l'application (voir Figure 6.18). 



Figure 6.18 

Ajouter une video 
a la file de rendu. 



n ~ n 




CD 




La fenetre affiche le nom du document ajoute et propose quelques reglages predefinis de 
compression. Pour chaque video ajoutee, differents parametres sont disponibles : le nom de 
la source et son positionnement sur votre machine, le format, des reglages predefinis pour le 
format choisi, le nom, le chemin du fichier de sortie et l'etat encode - en cours d'encodage 
ou en attente d'encodage - qui lui est associe. 

Dans la colonne Format, selectionnez l'option FLVIF4V si cette option n'etait pas deja 
active par defaut. 

Dans la colonne Predefinir, activez l'un des differents reglages prets a utiliser. 
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Reglages d'exportation 

La fenetre de rendu qui s'affiche au lancement de 1' application permet d'acceder aux details 
des reglages d'exportation pour affiner les reglages proposes par defaut. 

Dans la file d'attente de rendu (voir Figure 6.18), dans la colonne Predefinir, cliquez sur le 
lien jaune pour acceder aux options de reglage du format selectionne. Une nouvelle boite de 
dialogue s'ouvre (voir Figure 6.19). 



Figure 6.19 

Reglages 
d'exportation. 





A l'interieur de cette fenetre, nous distinguons deux parties. A gauche, un apercu permet de 
visualiser, recadrer et definir des points de repere qui permettent d'ajouter une couche 
d' interactivity dans une video. A droite, les options d'echantillonnage gerent la compres- 
sion audio et video. Nous abordons l'ensemble de ces reglages, par categorie, dans les sections 
qui suivent. 

Source et Sortie 

L'onglet Source, situe en haut et a gauche de la fenetre de reglages d'exportation, affiche 
d'abord un apercu de la video. Pour visualiser l'ensemble de la video, vous pouvez deplacer 
la tete de lecture qui se trouve sous la zone d'affichage de la video, le long de la bande jaune 
qui represente la duree de la video. 

Vous pouvez egalement modifier les points d'entree et de sortie de la video de sorte a rogner 
les premieres et les dernieres images de la sequence, pour en reduire la duree. Pour cela, 
deplacez les triangles situes a l'extremite gauche et droite de la bande jaune et rapprochez- 
les vers le milieu de cette bande, jusqu'a l'endroit a partir duquel vous souhaitez demarrer 
et interrompre la video. 
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Au-dessus de la bande jaune, un menu Ajuster permet de visualiser la video en taille reelle, 
telle qu'elle apparaitra dans Flash, ou bien avec d'autres proportions. Pour un apercu reel, 
selectionnez 100 %. Pour un apercu integral, selectionnez Ajuster. 

Dans la partie inferieure, vous avez la possibility de creer des points de repere dans le flux 
video. Nous reviendrons sur cette notion au Chapitre 8. 

Au sommet enrin, un bouton de recadrage permet de supprimer les bords de la video et n'en 
conserver qu'une partie. Pour recadrer, cliquez sur ce bouton, puis dessinez un rectangle sur 
la zone d'affichage de la video (voir Figure 6.20). Pour valider le recadrage, passez a 
l'onglet Sortie, puis selectionnez 1' option Modifier la taille de la sortie, du menu intitule 
Reglage du recadrage (voir Figure 6.21). 



Figure 6.20 

Source. 




Figure 6.21 

Sortie avec option 
Modifier la taille 
de la sortie. 



Sortie 



Reglage du recadrage 
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Dans ce meme menu, l'option Bandes noires conserve les dimensions initiales de la video, 
mais remplit la zone supprimee avec le recadrage par du noir (voir Figure 6.22). 



Figure 6.22 

Sortie avec option 
Bordures noires. 




En selectionnant l'option Ajuster, l'image recadree epouse les dimensions initiales de la 
video. Cette option agrandit la video et par consequent la deteriore de maniere importante 
(voir Figure 6.23). 



Figure 6.23 

Sortie avec option 
Ajuster. 



Reglage du recadrage Ajuster 




Une fois les premiers reglages de rognage definis, vous pouvez personnaliser les parametres 
de l'encodage, affiches a droite de la fenetre. 

Reglages personnalises 

A droite de la fenetre de reglages d' exportation, nous pouvons control er les parametres 
d'echantillonnage pour la compression du flux video en cours (voir Figure 6.24). 
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Reglages d'exporta- 
tion personnalises. 




En haut de la fenetre figurent les reglages de base. Dans la partie inferieure, vous pouvez 
modifier les parametres attribues par defaut, des reglages predefinis : 

• Dans le menu Format, vous pouvez revenir sur le format de fichier. Conservez 1' option 
FLVIF4V pour le format video de Flash. 

• Dans le menu Preconfiguration, vous pouvez de nouveau acceder a des reglages preen- 
registres, comme la fenetre de rendu. Conservez le reglage actuel que nous allons modi- 
fier en intervenant sur les reglages en bas de la fenetre. 

• Le lien jaune, Nom de la sortie, permet de renommer le fichier qui sera cree lors de 
l'encodage. Puisque le document est un element destine au Web, nommez-le sans 
espace ni caracteres speciaux ou accentues et avec son extension .flv ou .f4v, selon le 
format d'encodage choisi. Conservez l'option Exporter video, pour exporter le signal 
video lors de l'encodage. Conservez l'option Audio, pour conserver le son a l'enco- 
dage. 

Utiliser le FLV pour I'audio, la video ou les deux. Le format FLV est initialement prevu pour 
gerer de la video, et done, indirectement, le son. Mais il est possible d'exploiter les proprietes d'un flux 
FLV pour encoder uniquement du son, uniquement de la video ou les deux a la fois. Par exemple, 
vous pouvez traiter pour une emission audio seule sous la forme d'un flux video, en desactivant 
l'option Exporter video. Ce procede est commode car il evite de gerer le son avec ActionScript et per- 
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met, en outre, de I'accompagner d'interactivite grace a la synchronisation d'actions avec les points de 
repere disponibles uniquement avec le format video de Flash (voir aussi le Chapitre 8). 



Une fois ces prereglages verifies, vous pouvez les personnaliser dans la partie inferieure de 
la fenetre ou sont affiches cinq onglets : Filtres, Multiplexeur, Video, Audio et Autres. 

Filtres 

L'onglet Filtres permet de flouter l'image. Cela peut adoucir, par exemple, une image initia- 
lement tres degradee. Mais cette option est surtout utilisee pour reduire le bruit d'une video 
et accelerer le calcul du rendu. Le filtre flou altere, bien entendu, l'image finale. 

Pour activer le flou, cochez 1' option Flou Gaussien. Puis affinez les reglages situes au-des- 
sous de 1' option activee. 

Multiplexeur 

La categorie Multiplexeur permet de choisir le type d'algorithme que l'encodeur appliquera 
a la video destinee a Flash. Deux options sont proposees : FLV ou F4V. De ce choix depend 
la compatibility de la video avec les versions anterieures du lecteur Flash. FLV permet de 
gerer la transparence et est compatible avec Flash 6 (sans transparence : Sorenson Spark) 
ou 8 (avec transparence : On2 VP6) et les versions ulterieures. Le F4V, compatible 
Flash 10, permet de gerer une image en haute definition. 

Dans ce chapitre, nous abordons la video composite, done, FLV, pour en savoir plus sur la 
haute definition, reportez-vous au chapitre suivant. 

Pour exporter la video avec sa transparence ou pour Flash 7, cochez 1' option FLV (voir 
Figure 6.25). 



Figure 6.25 

Multiplexeur. 



Reglages de base 



o 



O Type de flux pour le multiplexage des donnees audio et video. 



Taille de fichier estimee : 

4 Mo 



Annuler 



Mecanisme du codec On2 VP6. Le codec On2 VP6, par rapport au codec Sorenson Spark, floute 
les artefacts generes par une compression de type Sorenson. Ainsi, l'image resultante, du fait que 
l'image est en mouvement, parait plus propre que cede initialement obtenue avec le premier algo- 
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rithme, pour un poids egal. Mais le codec Sorenson Spark demeure adapte a certains types de video 
pour lesquelles les mouvements restent moins prononces. Le Sorenson Spark, dans ce cas, peut 
meme offrir une meilleure compression que le On2VP6. Pensez a tester differents rendus selon le type 
de video a publier avant de determiner votre choix. La qualite de la compression etant assujettie a la 
nature intrinseque de chaque video, les resultats obtenus peuvent varier d'une video a I'autre. 

Video 

L'onglet Video donne acces aux reglages detailles de compression (voir Figure 6.26). 



Figure 6.26 

Video (FLV). 




La premiere etape du reglage affecte les proprietes video de base (voir Figure 6.27). 



Figure 6.27 

Reglages video 
de base (FLV). 



Reglages video de base 



Codec: Sorenson Sp... • On2 VP6 



^ Coder la couche alpha 



Largeur d'image [pixels]: 
Hauteur d'image {pixels): 



Images/s [i/s]: 25 




• Choisissez le codec Sorenson Spark pour un format de video compatible avec Flash 6 et 
si le fichier video provient d'une captation stable. 

• Choisissez le codec On2 VP6 pour une video compatible avec Flash 8 et les versions 
ulterieures. Ce format est aussi leger que le Sorenson mais lisse les artefacts rencontres 
lors de la compression pour les images en mouvement. L image obtenue est done de 
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meilleure qualite pour un poids similaire dans les videos animees. Ce format autorise en 
outre la gestion de la transparence. En choisissant le codec On2 VP6, vous accedez a 
1' option Coder la couche alpha. 

• Cochez 1' option Coder la couche alpha pour que la transparence du fichier video a encoder 
soit preservee dans 1' echantillonnage. A defaut de cocher cette option, la transparence 
sera convertie en noir et, une fois importe dans Flash, vous ne pourrez plus voir les 
elements disposes a l'arriere-plan de la video. 

Plus has, nous distinguons les options de redimensionnement. Le redimensionnement intera- 
git dynamiquement avec les options du menu Reglage du recadrage, situe a gauche de la fene- 
tre, dans l'onglet Sortie. Selon l'option choisie dans ce menu, le redimensionnement pourra 
apparaitre inactif. Evitez bien sur d'agrandir une video. Vous en altereriez le contenu. 

• Pour changer la taille de la video, en largeur et en hauteur, modiriez directement les 
valeurs affichees. 

• Cliquez eventuellement sur la case situee a droite des valeurs pour contraindre les 
modifications a un redimensionnement homothetique. 

La cadence de la video (ou frequence) peut etre definie dans le menu Images/s [i/s]. Utilisez 
une cadence elevee pour preserver la qualite de la video, mais au detriment de son poids. 
Par defaut, la cadence est affichee sur 30ips, qui correspond a une cadence NTSC ameri- 
caine. Portez la valeur de preference sur 25ips pour etre en conformite avec les standards 
europeens PAL. 

Conflit entre la cadence des videos et la cadence des animations Flash. Rappel . Les pro- 
priety d'un document Flash affichent une cadence d'images. Si vous importez une video, physique- 
ment, dans un document Flash qui n'affiche pas la meme cadence que celle de la video, la video sera 
desynchronisee par rapport a I'animation et par rapport a la bande son qui lui est propre. Si vous sou- 
haitez integrer physiquement une video dans le scenario de Flash, utilisez la meme cadence d'images 
pour les deux fichiers. Cette constatation ne vaut pas pour les videos gerees dynamiquement, via le 
composant FLVPlayBack ou directement en ActionScript a I'aide de la classe NetStream. 

Modifier la cadence des images. Certains logiciels, et notamment Motion, disposent d'un moteur 
de conversion ties performant particulierement adapte pour le remappage temporel (calcul des ima- 
ges ajoutees ou supprimees suite a la modification de duree d'un flux video). Evitez, en regie gene- 
rale, de modifier la cadence de I'image dans I'encodeur Adobe qui ne gere pas de recalcul sur des 
images intermediaires aussi efficacement que dans des logiciels dedies. Preferez gerer cette modifica- 
tion au sein meme du logiciel de compositing pour un meilleur rendu. 

La deuxieme etape affecte les reglages de debit (voir Figure 6.28). 

Plus bas dans la fenetre, deux options d'encodage du debit sont proposees : CBR 
{Constant Bite Rate pour echantillonnage constant) et VBR {Variable Bite rate pour 
echantillonnage variable). 

Lencodage en VBR designe une compression qui evolue dans le temps (variable) en fonc- 
tion du mouvement et de la richesse des images. Tandis qu'en CBR, la compression reste 
constante quel que soit le mouvement des images. II est recommande de choisir une com- 
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Dimensions standard d'une video pour le Web 

La taille d'une video peut etre geree en fonction de la taille de votre document Flash ou inferieure, si 
sa vocation est de se distinguer d'un formatage classique, pour une creation graphique par exem- 
ple. Mais dans le contexte de la gestion de videos aux formats standard, dans le cadre de la diffusion 
de sequence de reportage ou de fiction simple par exemple, void les dimensions generalement 
observees : 

Les tailles d'image standard pour une video au format 4/3 de source PAL sont : 

■ Modem (56 Kbits/s) : 1 80 x 144 

■ ADSL : 360 x 288 

■ Cable : 576 X 460 

■ Cable/reseau d'entreprise, fibre optique : 720 x 576 

Les tailles d'image pour une video au format 1 6/9 PAL sont : 

■ Modem (56 Kbits/s) : 320 X 1 80 

■ ADSL : 540X304 ou 576 X 324 

■ Cable : 960X540 ou 1 024 x 576 

■ Cable/reseau d'entreprise, fibre optique : 1 920 X 1 080 

Les tailles d'image standard pour une video au format 4/3 de source NTSC sont : 

■ Modem (56 Kbits/s) : 160 x 20 

■ ADSL : 320 X 240 

■ Cable : 512 x 384 

■ Cable/reseau d'entreprise, fibre optique : 640 x 480 

Les tailles d'image pour une video au format 1 6/9 NTSC sont : 

■ Modem (56 Kbits/s) : 1 92 x 1 08 

■ ADSL: 384X 216 

■ Cable : 448 X 252 

■ Cable/reseau d'entreprise, fibre optique : 704 x 396 



Figure 6.28 

Reglages de debit 
(FLV). 
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pression VBR pour un rendu de meilleure qualite, mais au risque que certains passages de la 
video s'arretent pendant la lecture. Le mode CBR est preconise en revanche pour des flux 
plus homogenes et risque moins d'interrompre la lecture des sequences video, mais les ima- 
ges en mouvement seront degradees car elles sont toutes compressees a l'identique, que les 
images soient riches et animees ou pauvres et fixes. La qualite des animations riches risque 
done d'en patir de maniere perceptible. L'encodage VBR sollicite davantage, de part la 
nature fluctuante de la compression, les ressources processeur du serveur qui met ces videos 
a disposition. Certains problemes de synchronisation de 1' audio ont egalement ete observes 
dans des conditions extremes de bas debit. Pour notre exemple, restez sur VBR. Le codec 
Sorenson Spark ne permet enfin qu'une compression en CBR. 

Le parametre Passes d'encodage designe le nombre de passages sur la video que l'encodeur 
doit effectuer avant de determiner la quantite d' informations a supprimer. Plus l'encodeur 
analyse la video, meilleur en sera le rendu. II est done recommande de choisir l'option Deux 
passes, meme si cela augmente le temps de calcul pour l'encodage. Cochez l'option Deux. 

Sous le nombre de passes, un reglage sur la compression est disponible. Les valeurs indi- 
quent le debit pour lequel la video doit etre adaptee. Ce debit est defini en nombre de kilo- 
bytes par seconde et fait directement reference au debit dont les utilisateurs disposent avec 
leur connexion Internet pour lire la video. 

Si une passe a ete activee, alors, un seul taux de compression, unique, est propose pour 
l'ensemble de la video. Si l'option Deux passes en revanche a ete activee, deux taux sont 
proposes. Le taux maximum determine le seuil de compression pour les images riches et 
mouvementees, alors que le seuil minimum determine celui des images fixes. Pour eviter 
une rupture de flux lorsque le lecteur atteint une image animee et riche, reduisez l'ecart 
entre les deux seuils proposes en rapprochant autant que possible le seuil maximum du seuil 
minimum. Deux seuils de valeur identiques equivalent a une compression Une passe. Vous 
augmentez simplement la duree de l'encodage. 

Enfin, la variabilite du debit, affichee pour deux passes uniquement, permet de determiner le 
moment oil Ton considere que l'image doit basculer d'une compression a l'autre. Plus la 
valeur est elevee, plus la compression basculera d'un seuil a l'autre intempestivement. Pour 
un debit relativement plus constant, reduisez cette valeur, mais au detriment de la qualite 
des images animees et riches. Conservez pour notre exemple la valeur definie par defaut 
(80). 

La troisieme etape consiste a ajouter des reglages plus avances (voir Figure 6.29). 



Figure 6.29 

Reglages avances 
(FLVJ. 



1 » Reglages avances | 


Definir la distance entre les images cles 




Profit simple 




Visee trop basse [% de ciblej 


• .90 


Qualite: • Bonne 


Optimale 



D'abord, la distance entre les images-cles permet de definir quelles images de la video 
seront codees integralement. L'encodeur determine automatiquement une image-cle toutes 
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les deux secondes pour une lecture simple du flux video. Conservez dans cet exemple la 
valeur par defaut (automatique). 

Les images-cles. En video, la compression du signal consiste a eliminer les informations redon- 
dantes d'une image sur I'autre et ne conserver que les informations qui changent. Les images-cles 
servent a rafraichir I'image courante avec une image pleine. Cela permet d'eviter certaines aberrations 
visuelles surtout lorsque Ton autorise I'utilisateur a naviguer, a I'aide de fonctionnalites d'acceleration 
ou de chapitrage, a I'interieur du flux video. Plus la video comporte d'images-cles, plus elle sera nette 
et plus la navigation pourra etre ciblee, mais plus elle sera lourde egalement. Nous revenons plus en 
detail sur cette option au Chapitre 8. 

Plus loin, le profil sert a optimiser la compatibility de la video avec des equipements faibles 
en carte video. Si l'option est activee, la video sera alteree et necessitera alors moins de res- 
sources sur la machine utilisateur. Ne cochez pas l'option Profil simple. 

Le dernier reglage permet de definir le pourcentage de video a precharger dans le cas oil le 
debit serait vraiment trop faible, avant de pouvoir etre lu automatiquement. Conservez la 
valeur par defaut. 

Une option de qualite permet enfin de choisir entre deux valeurs. Bonne specifie une 
meilleure qualite au detriment de la rapidite du chargement pour les connexions basses. 
Optimale, a l'inverse, rend la video plus accessible mais au detriment de sa qualite. 

Audio 

La compression Audio (voir Figure 6.30), lorsqu'elle est requise, peut etre optimisee en la 
passant en Mono. Vous pouvez egalement compresser le signal en reduisant la valeur du 
menu Debit. Notez que le son partage le debit avec la video. Plus vous augmentez le debit 
pour le son, plus vous diminuez celui qui restera disponible pour I'image. 

A titre indicatif, une valeur inferieure a 64 Kbits/s commence a affecter serieusement la 
qualite sonore d'une musique. Une valeur inferieure a 32 Kbits/s commence a affecter de 
maniere perceptible le son de la voix. Privilegiez un reglage generalement compris entre 64 
et 128 Kbits/s grand maximum. 

II est possible d' encoder le son dans un format audio de meilleure qualite, mais uniquement 
avec le format F4V (voir Chapitre 7). 

Autres 

Un dernier onglet permet de publier directement la video sur un serveur FTP, pour mettre a 
jour un podcast audio ou video par exemple, sans avoir a utiliser de logiciel de transfert pour 
ce faire (voir Figure 6.31). Renseignez, dans ce cas precis, les codes FTP fournis par votre 
hebergeur pour proceder directement a une mise en ligne du flux video sur un serveur distant. 

Une fois tous les reglages definis. Cliquez sur OK. La boite de dialogue se referme et, dans 
la fenetre de depart, le fichier video est pret a etre encode. Cliquez sur le bouton Demarrer 
la file d'attente pour lancer le calcul. 
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Figure 6.30 

Audio (FLVJ. 




Reglages de debit 



Type de flux pour le multiplexage des donnees audio et 



Taille de fichier estimee : 
4 Mo 



Figure 6.31 

FTP 




Vous Douvez verifier la connexion en cliauant sur le bouto 
V Type de flux pour le multiplexage des donnees audio et vi 

Taille de fichier estimee : Annuler 
4 Mo 



Une jauge materialise alors la progression de l'encodage (voir Figure 6.32). La compres- 
sion se termine par un signal sonore et le fichier est enregistre a l'endroit specifie. Par 
defaut, si vous ne specifiez pas d' emplacement ni de nom de sortie, le fichier reprend le nom 
de la video originale et est enregistre dans le meme repertoire. 
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Figure 6.32 

Rendu. 




Video : 632x410. 25 

Audio ! MPEG Layer III <MP3>. 256 |Kbits/s|. Stereo 
Debit VBR, 1600.00 [Kbils/s) 



La video peut maintenant etre integree a Flash. 
A retenir 

■ La compression audio-video est un compromis entre les dimensions de I'image, le taux de compression 
de I'image, le taux de compression du son et le nombre d'images-cles. 

■ II est possible d'exploiter le format FLV y compris pour diffuser de I'audio. Cela permet d'y associer, 
eventuellement, de I'interactivite. 

■ La cadence des images de la video doit etre identique a la cadence de la scene, dans flash, si la 
video doit etre importee physiquement dans le scenario. Ce n'est pas le cas pour les videos gerees 
avec un composant ou avec la classe NetStream. 



Integrer de la video composite dans Flash 

II y a plusieurs manieres d' integrer de la video dans Flash. Nous pouvons naturellement la 
traiter via ActionScript, mais aussi en utilisant un composant preprogramme. Dans cette 
section, nous utilisons le composant FLVPlayBack. Nous abordons la gestion de la video en 
ActionScript au Chapitre 8. 



Exemples > ch6_videoComposite_l .fla 



Dans le document "ch6_videoComposite_l.fla", seul le caique f ond_mc affiche un contenu. 
Un autre caique, nomme video, demeure vide. 
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Dans ce document, nous allons placer sur la scene une occurrence du composant video FLV- 
PlayBack et, a travers l'lnspecteur de composants, nous allons etablir une liaison entre cette 
occurrence et la video exportee au format FLV. 

1. Affichez la fenetre des composants (Fenetre > Composants) - voir Figure 6.33. 



Figure 6.33 

Fenetre des com- 
posants. 



fa User Interface 
fa Video 

H FLVPIayback 

^ FLVPIaybackCaptioning 

LiiJ BackButton 
ButferingBar 

ueJ CaptionButton 

□D ForwardButton 

SI FullScreenButton 

QD MuteButton 

QD PauseButlon 

LD PlayButton 

PlayPauseBunon 

D SeekBar 

UL) StopBuRon 

31 VolumeBar 



2. Dans la categorie Video, glisser-deposez l'element intitule FLVPlayBack directement 
sur la scene (voir Figure 6.34). 

Figure 6.34 

Composant place 
sur la scene. 




3. Puis, affichez la fenetre Inspecteur de composants (Fenetre > Inspecteur de composants) 
- voir Figure 6.35. 

Pour visualiser les options d'un composant depuis la fenetre Inspecteur de composants, le 
composant doit etre prealablement selectionne sur la scene. Cliquez au besoin sur le composant 
video place dans la scene pour le selectionner si celui-ci n'etait pas actif. 
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Composant FLVPlayBack pour ActionScript 2 ou 3 

Lorsque vous placez un composant sur la scene, le code utilise pour le creer n'est pas le meme selon 
que vous pubiiez un document en ActionScript 2 ou 3. Aussi, ies parametres personnalisables de la 
fenetre Inspecteur de composants n'affichent pas Ies memes noms seion le contexte de developpe- 
ment. Le parametre source appartient a un codage ActionScript 3. En ActionScript 2, ce parametre 
est identifie sous le terme ContentPath. 



Figure 6.35 

Fenetre Inspecteur 
de composants. 



@ FLVPIayback 

f Parametres Liaisons Schema^ 



Nom [ 

align 

autoPlay 

cuePo nts 

isL ve 

preview 

scaleMode 

skin 

skinAutoHide 

skinBackgroundAlpha 

skinBackgroundColor 

source 

volume 



Vakur 

center 

true 

Aucun 

false 

Aucun 

maintain Aspect Ratio 

Aucun 

false 

1.00 

#000000 



Dans la fenetre des composants, selectionnez le parametre intitule source. Puis, dans le 
champ de texte de saisie, cliquez a droite pour afficher une icone qui represente une loupe. 
Cliquez sur la loupe pour ouvrir une boite de dialogue de selection de fichier. Dans cette boite 
de dialogue, cliquez sur l'icone qui represente partiellement un dossier, situee a droite, pour 
ouvrir enfin la fenetre de selection de fichier. Selectionnez alors, sur votre poste de travail, la 
video enregistree au format FLV. L' option Identique aux dimensions sources permet de modifier 
les dimensions du composant et 1' adapter aux dimensions de la video appelee en reference. 




Avertissement pour les utilisateurs de Windows. Attention, sous Windows, l'icone de selec- 
tion de fichier du composant FLVPlayBack n'est presque pas visible. Vous devez cliquer a I'extremite 
du bord droit de la boite de dialogue pour I'activer. Le cas echeant, saisissez manuellement le chemin 
relatif qui relie le document Flash a la video (voir Figure 6.37). 



Puis refermez la fenetre en validant les etapes (voir Figure 6.36). 



Figure 6.36 

Chemin 
du contenu, 
sous Macintosh. 



Chemin du contenu 



[videoMotion/particules.flv 



JU 



M Identique aux dimensions source 



( Annuler~ ^ ( OK ^ 



Une fois la liaison activee, la fenetre Inspecteur de composants affiche le chemin d'acces au 
fichier video FLV (voir Figure 6.38). 
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Figure 6.37 

Chemin 
du contenu, 
sous Windows. 



Chemin du contenu 



videoMobon 'part :u es.fl 

J Identique aux dimensions source 



Figure 6.38 

Chemin 

enregistre dans la 
fenetre Inspecteur 
du composant. 



FLVPIayback 

fParametres Liaisons Schema 1 



Nom 



Valeur 



align 

autoPlay 

cuePoints 

isLive 

preview 

scaleMode 

skin 

skinAutoHide 

skinBackgroundAlpha 

skinBackgroundColor 

source 

volume 



centei 

true 

Aucun 

false 

Aucun 

maimainAspectRatio 

Aucun 

false 

1.00 

#000000 

videoMotion/particules.flv 
1 



Parametre source des composants videos. Verifiez toujours que le chemin defini pour le para- 
metre source des composants videos part bien de la position relative de la page HTML qui contient 
le document Flash (ou du Flash lui-meme). Dans certains cas, si vous travaillez en reseau par exemple, 
Flash peut enregistrer un chemin absolu qui part de la racine de votre systeme en ciblant votre reseau 
local. Un chemin de ce type ne serait pas fonctionnel une fois le projet en ligne. II faut done toujours 
verifier I'emplacement designe une fois I'option validee. Le chemin doit etre relatif. Par exemple, le 
chemin "videos/mavideo.flv" peut etre valide si la video se nomme "mavideo.flv" et qu'elle se trouve 
dans un dossier nomme "videos", situe au meme niveau que votre document Flash ou du moins, au 
meme niveau que la page HTML qui affiche votre document Flash. En revanche, un chemin du type 
"Disque/Poste de travail/projet/site/videos/mavideo.flv" ne sera pas valide dans ce contexte. 

Des la fermeture de la boite de dialogue, le composant est automatiquement adapte aux 
dimensions de la video. Au besoin, repositionnez ce composant a l'origine de la scene, ou a 
I'emplacement voulu (voir Figure 6.39). 

Selon la configuration de votre application, une console de lecture peut etre attachee auto- 
matiquement a votre composant video. Elle permet de piloter la video a la publication. Nous 
aborderons ces fonctionnalites dans le prochain chapitre. Pour une video composite, qui 
apparait generalement comme un element purement graphique, sans outils de controle 
autres que l'interactivite developpee par ailleurs, nous choisissons de masquer cette 
console. 

1. Pour masquer la console de lecture affichee par defaut, dans 1' Inspecteur de compo- 
sants, cliquez a droite de I'option Skin jusqu'a ouvrir une boite de dialogue (voir 
Figure 6.40). 

2. Dans cette fenetre, vous pouvez choisir le type d'habillage pour la console. 

3. Dans le menu Enveloppe, selectionnez I'option Aucun. Puis, validez. 
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Figure 6.39 

Reposition- 
nement eventuel 
du composant. 




Figure 6.40 

Suppression 
des controles 
de lecture 



Selectionner une enveloppe 



( Annuler ) 



Enveloppe : Aucun 



Couleur: ^ 



La video ne possede plus de controle de lecture. En publiant le document, le flux FLV joue 
1' animation de particules (feu d'articice) et laisse apparaitre la scene du document Flash 
situee en arriere-plan (voir Figure 6.41). 

Si vous souhaitez utilisez une Skin pour controler la lecture de la video, reportez-vous au 
Chapitre 8 pour le detail de ces options. 

En publiant le document Flash, la video n'est jouee qu'une seule fois. II est possible de 
creer des boucles ou de controler plus precisement la lecture de la video. Nous abordons 
egalement ces notions dans les deux chapitres suivants. 
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Figure 6.41 

Apercu apres 
publication 



Parametrer un composant via ActionScript 

L'ensemble des proprietes du composant FLVPlayBack peut etre gere en ActionScript. Pour cela, 
il suffit d'invoquer le nom d'occurrence du composant et d'y attacher la propriete a modifier, a 
I'aide de la syntaxe pointee. Pour modifier la source dynamiquement, inscrivez par exemple : 
maVideo . source=" videos /film2 .flv". Nous abordons en detail certaines de ces proprietes au 
Chapitre 8. 

Vous pouvez aussi ajouter un apercu de la video pour faciliter sa manipulation dans la scene : 

1. Pour ajouter un apercu, dans l'lnspecteur de composants, cliquez a droite du parametre 
Preview. 

2. Dans la nouvelle boite de dialogue, arretez la video a l'emplacement voulu. 

3. Puis, cliquez sur OK. 

Un apercu materialise a present la video dans la scene. Cet apercu n'apparait pas a la publi- 
cation. II ne sert que pour manipuler la video dans Flash. Cet apercu etant une image captu- 
ree en JPEG, il ne gere pas la transparence. Mais cela n'affecte en rien le rendu final, obtenu 
a la publication du document. 



Reconstituer un univers 3D avec une video aplatie. Flash CS4 possede un moteur d'affi- 
chage simill 3D. II est possible d'animer dans I'espace, des symboles de type MovieClip, avec des 
proprietes de rotation et de position. Un composant video est un objet qui peut etre contenu 
dans un symbole de type MovieClip. II est done possible d'animer et projeter des videos dans 
I'espace 3D de Flash. 

Dans le cadre d'une animation de particules publiee au format FLV avec sa couche transparente, vous 
pouvez done recreer un effet de particules en 3D dans Flash. Pour cela, creez un document compre- 
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nant plusieurs occurrences de MovieClip identiques, chacune repartie sur un caique distinct et de pro- 
priety de position et de rotation 3D differenciees. Mais elles sont toutes centrees et superposees dans 
la page, de sorte que les contenus se croisent au centre du document. Placez, dans le symbole de la 
bibliotheque ou dans une des occurrences de la scene, le composant FLVPlayBack. Associez sa 
source a un flux video FLV de particules code avec la transparence. 

En publiant I'animation, vous pouvez voir que la video, a priori aplatie, mais redistribute spatia- 
lement, et avec sa transparence, adopte une toute nouvelle dimension. Le fichier 
"ch6_videoComposite_3.fla" propose ce type de mise en forme. 

La transparence, associee a I'affichage 3D de Flash, ouvre des perspectives d'exploitation des flux 
video, mais requiert, bien sur, un minimum de ressources machine - ce qui reserve ce type d'agence- 
ment a des configurations solides. 

A retenir 

■ Pour integrer une video FLV dans Flash, nous utilisons le composant FLVPlayBack. 

■ Ce composant presente des options differentes selon la version de langage utilisee pour la publication 
du document. 



Synthese 

Dans ce chapitre, vous avez appris a integrer des videos standard dans un document Flash, 
a transposer des creations videos composites avec de la transparence dans un document 
Flash. Vous avez appris a optimiser un flux video pour le Web et a identifier les contraintes 
et apports du format FLV pour une utilisation la plus qualitative possible. Vous etes en 
mesure de realiser des interfaces de sites riches qui mixent les flux video avec des contenus 
graphiques traditionnels en Flash. 
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Depuis la version 10 (CS4), Flash accepte le codec H-264 a travers le format video F4V. Ce 
codec offre une compression d'une excellente qualite oil les artefacts demeurent presque 
imperceptibles. Cette prouesse est telle que Ton peut desormais deployer une video dans un 
format etendu (haute resolution) sans perdre en qualite d'affichage. 

Cependant, a la difference du format FLV, le format F4V ne gere pas la couche transparente 
(canal alpha). Le F4V convient done plus particulierement a la diffusion de sequences video 
isolees et non composites (extraits de films, introductions, transitions, decors d'arriere-plan 
animes, interviews, infographies animees). 

Dans ce chapitre, nous allons voir comment encoder au format F4V et distribuer des videos 
de haute qualite vers Flash, y compris vers des versions du lecteur a priori incompatibles 
avec ce format. Nous aborderons egalement quelques astuces qui permettent de compresser 
confortablement une video de grande taille sans perdre sur la qualite du rendu. 

Pour l'ensemble de ces exemples, nous utilisons des creations originales realisees par la 
societe gKaster, specialisee dans le Motion Design, et mises amicalement a notre disposition 
pour cette demonstration (www.gKaster.com). 

A Tissue de ce chapitre, vous serez en mesure d'integrer des videos de grande qualite au 
sein de documents Flash, y compris d'anciennes generations. 

Encoder en F4V avec Adobe Media Encoder 

Pour creer un fichier F4V, vous pouvez l'echantillonner avec Adobe Media Encoder. Dans 
cette section, nous abordons uniquement les reglages specifiques au format F4V qu'apporte 
ce logiciel. Si vous voulez decouvrir les reglages de base pour la compression d'une video 
pour Flash, communs au format FLV et F4V, reportez-vous au chapitre precedent, a la section 
"Echantilloner la video pour Flash". 

Exemples > gKaster > gKaster-amusement.mov 

Dans cette section, nous detaillons les options d'encodage pour le format F4V, avec le codec 
H-264. 

1. Lancez 1' application Adobe Media Encoder. 

2. Ajoutez, dans la file de rendu, le fichier nomme gKaster-amusement.mov, disponible 
dans le dossier gKaster des exemples du livre (voir Figure 7.1). 
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Figure 7.1 

Apercu de la 
video gKaster- 
amusement.mov. 




3. Dans la fenetre de l'encodeur Adobe, cliquez directement sur le lien jaune de la colonne 
Predefinir pour acceder aux reglages personnalises (voir Figure 7.2). 



Figure 7.2 

Fenetre Adobe 
Media Encoder. 




4. La fenetre de reglages s'ouvre. Dans la partie droite de la fenetre, activez l'onglet 
Multiplexeur pour definir le type d'encodage Flash (voir Figure 7.3). 



Figure 7.3 

Fenetre Reglages 
d'exportation. 



Reglages d'exportation 



La video HD en F4V 



179 



5. Selectionnez l'option F4V si celle-ci n'est pas deja active. 

6. Puis, cliquez sur l'onglet Video pour definir les reglages relatifs au format F4V (voir 
Figure 7.4). 



Figure 7.4 

Onglet Video. 




Dans la categorie Video, nous decouvrons des options legerement differentes de celles 
affichees pour le format FLV 



Onglet Video 

Le document Flash mesure 800 pixels de large. La video gKaster en fait 960. Nous allons 
done commencer par redimensionner cette video pour la contenir dans notre document. 

1. Cochez d'abord l'option de redimensionnement homothetique situee a droite des 
champs Largeur et Hauteur. 

2. Puis, inscrivez la valeur 800, dans le champ relatif a la largeur. La valeur Hauteur 
s'adapte automatiquement (voir Figure 7.5). 

Dans la partie Reglages video de base, vous trouverez de nouveaux parametres, specifiques 
au format F4V. 

Le format F4V utilise le codec H-264 (ou MPEG-4 Partie 10/AVC). Ce codec est developpe 
en commun par le VCEG (Video Coding Expert Group ou groupe d' experts en encodage 
video), l'ITU-T (International Telecommunications Union, Telecommunications Standardi- 
zation Sector ou le departement standardisation de l'union internationale des telecommuni- 
cations) et le MPEG (Movie Picture Expert Group ou le groupe d'experts en images 
animees). II se presente comme une amelioration du codec MPEG-2 et MPEG-4 et repose 
sur le principe suivant. 
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Figure 7.5 

Reglages video 
de base (F4V). 



Lorsqu'une compression classique n'utilise qu'une image-cle de reference pour definir les 
zones qui changent d'une image sur 1' autre (codage differentiel), le H-264 peut utiliser 
jusqu'a quatre images de reference. Cette logique lui permet de detecter le mouvement glo- 
bal, sur la duree, de groupes de pixels entiers, et de ne coder que l'emplacement de ces 
groupes et non la teneur colorimetrique de chaque pixel qui compose chaque groupe. Ainsi, 
quand une scene se repete a l'interieur d'une video, ou si plusieurs evenements graphiques 
identiques sont reproduits ou en mouvement sur differentes images-cles, ces evenements ne 
sont codes qu'une fois (voir Figure 7.6). Cela permet de compacter largement les videos 
longues aux effets repetitifs, ou dont la nature des images reprend toujours le meme type 
d' informations, qu'elles soient mobiles ou non (un sujet frontal sur un fond blanc, meme en 
mouvement, sera peu gourmand en poids, par exemple). Une compression H-264 appliquee 
a une video perd ainsi environ 80 % de son poids lorsqu'une video compressee en MPEG-4 
Partie 2 n'en perd que 50 %, et sans difference de qualite entre les deux modes de compression. 

Figure 7.6 Image-cle 1 Image-cle 2 Image-cle 3 Image-cle 4 



Representation 
du principe de 




I'algorithme ^ '_ 

H-264. q 

x1 



Les blocs, qui fondent la base de I'algorithme H-264, sont constitutes de 16 pixels (4 x 4). 
Outre l'avantage observe sur le poids du fichier, cette technique permet egalement de facili- 
ter et stabiliser la lecture du flux video surtout lorsqu'elle est diffusee en ligne. Car chaque 
paquet peut ainsi etre lu independamment des autres et contribue a remplir automatiquement 
les trous residuels eventuellement obtenus en cas de rupture de flux. 

Ces blocs sont utilises pour definir les images-cles de reference. Si une portion de l'image 
se repete ailleurs, I'algorithme identifie les nombreuses occurrences identiques de la zone 
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de base et la reproduit virtuellement, meme dans une image -cle. Cela allege done aussi le 
poids des images-cles. 

Le H-264 offre enfin un eventail de compression suffisamment large pour etre employe pour 
des flux de haute resolution, avec une frequence d'image elevee (diffusion HD), aussi bien 
que pour des flux tres reduits et de faible definition (appareils mobiles). 

De nombreuses options de compression sont possibles pour le H-264. Deux options essen- 
tielles sont disponibles dans l'encodeur Adobe : le profil et le niveau. 

Profit 

Le codec H-264 possede initialement sept profils de compression permettant de coder les 
images de faible resolution aux images a haute resolution. Les profils disponibles sont de 
qualite croissante et a selectionner en fonction de la dimension de la video. Parmi ces sept 
profils propres au H-264, Adobe Media Encoder en propose trois : ligne de base, principal 
et eleve (voir Figure 7.7). 



Figure 7.7 

Selection 
d'un profil. 




• Ligne de base. Ce profil est adapte aux contenus videos a destination d' appareils a fai- 
bles ressources (appareils nomades, mobiles, visio-conference, cameras reseau). Le 
temps de latence de ce profil (temps requis pour compresser et decompresser le signal) 
est faible. Ce profil est done tout particulierement adapte pour l'encodage en direct de 
mouvements rapides (zoom, inclinaisons, vues panoramiques). 

• Principal. Ce profil est adapte aux contenus a destination du Web, de la diffusion en vrai 
et faux streaming de contenus deja enregistres. Ce profil possede des capacites de robus- 
tesse a la perte de donnees qui en fait l'option ideale pour la video diffusee en ligne. 

• Eleve. Ce profil est utilise pour la diffusion et le stockage sur disque, l'encodage Blue- 
Ray, HD-DVD et la television haute definition francaise. II convient egalement a la dif- 
fusion de contenu en ligne de tres haute qualite, pour lesquels on prevoit un chargement 
de la video avant d'en activer la lecture, pour la V.O.D. par exemple. 
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Niveau 

Selon les dimensions de la video, nous determinons un niveau (Level) sur une echelle de 1 a 5.1. 
Plus l'image a encoder est grande, plus le niveau doit etre eleve (voir Figure 7.8). 



Figure 7.8 

Selection 
d'un niveau 




Dans le Tableau 7.1, la valeur de niveau a selectionner est definie en fonction de la resolu- 
tion de l'image et sa cadence. Pour notre exemple, conservez les valeurs par defaut. 



Tableau 7.1 : Niveaux en H-264 (extrait de la page http://fr.wikipedia.org/wiki/ 
H.264#Levels) 





Nombre maximum 


Debit maximum en bits 


Debit maximum en 


Exemples de definition 


Niveau 


de macro-blocs 


pour les profils Ligne 


bits pour le profil 


et d'images par 




lus par seconde 


de base et Principal 


Eleve 


seconde par niveau 


1 


1485 


64 Kbit/s 


80 Kbit/s 


128X96/30.9 
1 76 X 144/15.0 


1b 


1485 


128 Kbit/s 


160 Kbit/s 


128X96/30.9 
1 76 X 144/15.0 


1.1 


3000 


192 Kbit/s 


240 Kbit/s 


176 X 144/30.3 
176X240/10.0 










176 X 144/60.6 


1.2 


6000 


384 Kbit/s 


480 Kbit/s 


320 X 240/20.0 
352X288/15.2 


1.3 


11880 


768 Kbit/s 


960 Kbit/s 


352 X 288/30.0 


2 


11880 


2 Mbit/s 


2.5 Mbit/s 


352 X 288/30.0 
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Tableau 7.1 : Niveaux en H-264 (extrait de la page http://fr.wikipedia.org/wiki/ 
H.264#Levels) (suite) 





Nombre maximum 


Debit maximum en bits 


Debit maximum en 


Exemples de definition 


Niveau 


de macro-blocs 


pour les profils Ligne 


bits pour le profil 


et d'images par 




lus par seconde 


de base et Principal 


Eleve 


seconde par niveau 


2.1 


19800 


4 Mbit/s 


5 Mbit/s 


352 X 480/30.0 
352 X 576/25.0 


2.2 


20250 


4 Mbit/s 


5 Mbit/s 


720 X 480/1 5.0 
352 X 576/25.6 


3 


40500 


10 Mbit/s 


12.5 Mbit/s 


720 X 480/30.0 
720 X 576/25.0 


3.1 


108000 


14 Mbit/s 


17.5 Mbit/s 


1 280 X 720/30.0 
720 X 576/66.7 


3.2 


216000 


20 Mbit/s 


25 Mbit/s 


1 280 X 720/60.0 


4 


245760 


20 Mbit/s 


25 Mbit/s 


1 920 X 1 080/30.1 

2 048 X 1 024/30.0 


4.1 


245760 


50 Mbit/s 


62.5 Mbit/s 


1 920 X 1 080/30.1 

2 048 X 1 024/30.0 


4.2 


522240 


50 Mbit/s 


62.5 Mbit/s 


1 920 X 1 080/64.0 

2 048 X 1 088/60.0 


5 


589824 


135 Mbit/s 


168.75 Mbit/s 


1 920 X 1 080/72.3 

2 560 X 1 920/30.7 


5.1 


983040 


240 Mbit/s 


300 Mbit/s 


1 920 X 1 080/120.5 
4 096 X 2 048/30.0 



Onglet Audio 

Le format F4V offre une compression audio de bien meilleure qualite que le FLV. Le codec 
AAC, superieur a la qualite du MP3, propose une profondeur de son plus etendue, proche de 
celle d'un CD audio, mais naturellement, de poids legerement plus eleve. C'est aussi le 
codec employe par Apple et RealNetworks pour la diffusion de leurs contenus audios. Pour 
controler la compression audio, nous considerons veritablement deux parametres : la fre- 
quence et le debit (voir Figure 7.9). 

Frequence. La frequence indique le nombre de fois qu'une ponction d'echantillons 
sonores est effectuee par seconde (a ne pas confondre avec la longueur d'onde qui repre- 
sente la sonorite elle-meme). Plus la frequence est elevee, plus Ton peut distinguer les 
variations du son sur une duree donnee. Mais plus cela augmente necessairement le 
poids du fichier. 

Debit. Le debit consiste a synthetiser les informations en les arrondissant aux valeurs nume- 
riques les plus proches. Plus la compression du debit est forte, plus la representation du son 
est grossiere et perd en nuances, meme avec une frequence elevee. 
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* Reglages audio dc base 




Figure 7.9 

Reglages Audio 
(F4V). 




Les parametres de reglage affiches sont ceux definis par defaut pour le prereglage a partir 
duquel nous effectuons cette compression. Ces prereglages sont ceux affiches dans le menu 
Preconfiguration, au sommet de la fenetre d'encodage, ou bien dans la liste Predefinir, de la 
file d'attente de rendu. Selon le type de prereglage choisi, vous n'observerez pas, par conse- 
quent, les memes taux de compression. 

1 . Conservez pour cet exemple les valeurs par defaut. 

2. Puis, refermez la boite de dialogue des reglages de compression en cliquant sur OK. 

3. Lancez le rendu en activant le bouton Demarrer la file d'attente. 

4. Puis, quittez 1' application. 

Seuls des tests de rendu effectues en reel vous donneront une idee du resultat obtenu. 
N'hesitez pas a dupliquer le reglage dans la file d'attente de rendu et a y appliquer differents 
parametres de compression audio pour ne retenir que celui qui vous convient le mieux. 

A retenir 

■ Le format F4V offre une grande souplesse de compression qui permet d'adapter la video a tout type 
de support, d'une projection HD a une image reduite pour appareil mobile, sans perte de qualite. 

■ Le format F4V ne permet pas la gestion de la transarence (couche alpha). 

■ Lencodage audio, en F4V est superieur en qualite au codage MP3 du format FLV 

■ Si nous integrons la video avec un composant FLVPlayback, le format F4V requiert un lecteur 
Flash recent. 



Encodage F4V avec Quick Time 

Cela fait deja longtemps qu'il est possible d'exporter avec une compression H-264 depuis 
Quick Time. Le format video F4V de Flash qui repose sur le codec H-264, peut done aussi 
etre genere depuis un fichier Quick Time et etre integre a un composant Flash FLVPlay- 
Back, il sera normalement interprets. Pour eviter les messages possibles d'avertissement et 
de securite de Flash, lors de l'integration de la video, songez a substituer l'extension 
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obtenue avec Quick Time par .f4v. Mais, meme sans en modifier l'extension, le fichier 
pourra neanmoins etre lu comme un fichier F4V. 



Exemples > gKaster > gKaster-amusement.mov 



Dans cette section, nous detaillons le moyen d' encoder une video, a partir de Quick Time, 
au format F4V, pour Flash. 

1. Pour exporter la video au format H-264 avec Quick Time, dans Quick Time, faites 
Fichier > Exporter. 

2. Dans la boite de dialogue d'enregistrement, cliquez sur le bouton options (voir Figure 7.10). 



Figure 7.1 0 

Fenetre d'expor- 
tation Quick 
Time. 



OOO 



Exporter le fichier sous... 



Enregistrer sous : gKaster-amusement.mov 



2 



■* ► I SS = EE I ' a gKaster 



^Q, rechercher 



▼ APPAREIL5 
_J Mac Pro 

aw 



▼ EMPLACEM 



► _| ch6-video.,.posite-3.fla 
■nov ^ ch6-video. .osite-3.swf 
il.mov _| ch7-videoHD-l.fla 
nov ch7-videoHD-l.swf 
□ gKaster 
_Jgs 
images 

If ' , f l r " 1 



[j gKaster-a .15ips_2.f4v 
^ gKaster-amusement.mov 
[j gKaster-a . ementl.f4v 



»3 



Exporter : Sequence vers Sequence QuickTime 



( Options... 3 



Mode : ' Reglages les plus recent s 



T! 



( Nouveau dossier^) 



( Annuler ^ f Enregistrer^ 



3. Dans la boite de reglages, cliquez sur Reglages de la categorie Video (voir Figure 7. 1 1). 



Figure 7.1 1 

Reglages de la 
sequence. 



Reglages de la sequence 



'VI video 



Reglages... 1 Compression : Animati< 
Ceulijrs : M lions dt c 



( Taille...^ ) 



'_ Autoriser le transcodage 
^ Son 



f Reglages... Format : AAC 

v — ' Taux d'echantillonnage : 32.000 Khz 

(Recommande] 

Canaux : Stereo <G D) 

Debit : 128 kbps 



M Preparer pour une diffusion via Internet 



' Demarrage rapide '^Reglages 



A n nu I e i 
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4. Puis, dans la fenetre d'encodage, dans le menu Type de compression, selectionnez H-264. 

5. Dans les options de reglages pour le type H-264, choisissez Passes multiples et une qua- 
lite elevee, ainsi qu'un nombre d'image-cles automatique (voir Figure 7.12). Puis, validez. 

Reglages de compression video standard 



Figure 7.12 

Compression 
H-264. 



Type de compression : H.264 



3 



Frequence : [ Actuel 



Images cles : Q Automatique 
QChaque 
QToutes 



Debit : Q Automatique ment 
0 Restreindre a 



Optimise pour : lelecharger 



M Rearrangement des images 



Compresseur 
Qualite 



Apercu 



inferieure basse moyenrte elevee optimale 




Encodage : (A Q ualite optimale (passes 
~ multiples) 

Encodage plus rapide (passe 
^ unique) 




® 



r Annuler'' ( OK ^ 



Puisque le document Flash dont nous disposons mesure 800 pixels de large, nous pouvons 
egalement redimensionner ici la video en activant l'option taille : 

1 . Cliquez sur le bouton Taille. 

2. Dans la nouvelle boite de dialogue, specifiez une taille personnalisee. Puis, dans les 
champs situes a droite, inscrivez manuellement les valeurs 800 et 450. 

Les options de proportions permettent de rogner et deformer ou non la video afin qu'elle 
s'adapte aux nouvelles dimensions. L'option Letterbox ajoute du noir de part et d'autre si 
les proportions ne sont pas preservees. Dans notre cas, elles le sont. Cette option n'aura 
done aucun effet. Vous pouvez done valider (voir Figure 7.13). 



Figure 7.13 

Compression 
H-264. 









Dimensions : 1 Personnalise ; 1 


800 x 1 450 | 




M Conserver les proportions via : 


1 Letterbox 


m 


[~] Desentrelacer la video source 


(si besoin) 






( Annuler ] ( 


OK ~) 



La boite de dialogue d'options affiche maintenant les informations en rapport avec la com- 
pression H-264 (voir Figure 7.14). 



La video HD en F4V 



187 



Figure 7.1 4 

Compression 
H-264. 



Reglages de la sequence 



'V Vide 



Reglages... ^ Compression : H.264 

^ Qualite : Elevee 

( Filtre ) Reordonner les images : Oui 



raille 



Mode de codage : multi-passes 
^ Dimensions : 800x450 
J Echelle : Letterbox 



G Autoriser le transcodage 
M Son 

^Reglages. ^ Format : AAC 

v y Taux d'echantillonnage : 32.000 Khz 

(Recommande) 
Canaux : Stereo (C D) 
Debit : 128 kbps 



M Preparer pour une diffusion via Internet 
1 Demarrage rapide f Reglages 



f Annuler N ( OK 1 



H 



Attention, Quick Time conserve par defaut les precedents reglages lors de chaque nouvelle compres- 
sion. Lorsque vous encoderez un nouveau document, pensez a initialiser le redimensionnement pour 
eviter d'affecter votre nouveau fichier. 



Validez egalement la fenetre d' options. Puis, renommez le fichier "gKaster-amusement- 
h264.mov" et confirmez 1'enregistrement. L'encodage se termine. La video peut etre appelee 
directement depuis Flash, via un composant FLVPlayBack (voir Figure 7.15). 



Figure 7.1 5 

Lecture d'une 
video Quick Time 
H-264 dans un 
document Flash. 
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Les formats pris en charge par le composant FLVPlayBack (publie dans un document configure 
pour ActionScript 3) sont : FLV F4V MP4, M4A, MOV MP4V 3GP et 3G2. 



A retenir 

■ Quick Time permet d'exporter facilement une video avec un encodage H-264 directement lisible par 
le composant FLVPlayback de Flash CS4. 



Creer un lecteur video personnalise 

Dans Flash, en utilisant le composant video en vue d'integrer une video FLV ou F4V, une 
console de lecture est disponible par defaut. Elle permet de controler la video sans program- 
mation specifique. Differents types de consoles sont disponibles a travers le parametre Skin 
accessible dans l'lnspecteur de composants de chaque video active. 

Si vous utilisez une Skin predefinie, n'oubliez pas que Flash genere un fichier SWF pour 
chacune d'elle et qu'il ne faudra pas manquer de placer ce fichier sur le serveur d'heberge- 
ment, en meme temps que votre document SWF de base et votre video, sans quoi la console 
n'apparaitrait pas. 

■ Lorsque vous utilisez une Skin predefinie. Flash importe en realite un fichier SWF qu'il genere a la 
b volee, selon le type de Skin selectionne dans la fenetre Inspecteur de composants. Ces boutons sont 
standardises. Mais vous pouvez modifier la forme intrinseque des boutons deja encapsules dans ces 
Skins predefinies. Pour ce faire, dans le moteur de recherche de votre systeme, saisissez le nom de la 
Skin generee par Flash a la publication (par exemple SkinOverAll). Puis, reperez I'emplacement du 
fichier FLA, natif, ayant permis a Flash de generer ce fichier. II suffit d'ouvrir ce FLA dans Flash, de le 
modifier et de publier un nouveau fichier en lieu et place du precedent. La console accessible depuis 
votre composant est instantanement mise a jour. 

Pour personnaliser la forme des boutons, nous pouvons utiliser de simples symboles crees 
manuellement ou bien recourir a des composants separes qui controlent la lecture de la 
video. Ces composants sont egalement disponibles depuis la fenetre des composants. 
L'avantage de ces elements est qu'ils disposent deja d'une structure animee (effet "roll- 
Over" integre) et d' actions de controles preprogrammes. 

Dans cette section, nous presentons uniquement ces boutons preprogrammes. Nous revenons 
sur les actions gerees manuellement en ActionScript, au Chapitre 8. 



Exemples > ch7_videoHD_3.fla 



Dans le document "ch7_videoHD_3-fla", sur la scene, un composant video apparait au-dessus 
des boutons de controle personnalises (voir Figure 7.16). 

Dans le scenario, au-dessus du caique f ond_mc, chaque symbole ou composant est reparti 
vers un caique distinct (voir Figure 7.17). lis possedent des noms d'occurrence, mais cela 
est facultatif puisqu'aucune action n'est associee a ces objets sinon celles deja encapsulees 
dans les composants boutons eux-memes. 
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Figure 7.1 6 

Composant 
FLVPlayBack 
avec boutons 
personnalises. 




Figure 7.1 7 

Fenetre 
de scenario. 
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Pour inserer des boutons predefinis, prets a utiliser, vous devez placer des elements de la 
fenetre Composants, sur la meme scene que celle oil figure le composant video FLVPlay- 
Back. Flash, au moment de la publication, va automatiquement etablir une liaison entre le 
composant video et les boutons qui s'y referent. 

Pour placer des boutons preprogrammes sur la scene, affichez la fenetre des composants via 
Fenetre > Composants (voir Figure 7.18). Puis, dans la categorie Video, selectionnez le 
bouton de votre choix. Puis, glisser-deposez les boutons individuellement sur la scene ou se 
trouve le composant FLVPlayBack. 



Figure 7.18 

Fenetre 
Composants. 
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Double -cliquez ensuite, dans la scene, sur chacun d'entre eux jusqu'a atteindre le graphisme 
modifiable pour eventuellement les personnaliser. Enregistrez et publiez. Les boutons inseres 
controlent la video (voir Figure 7.19). 



Figure 7.1 9 

Apercu du 
document apres 
publication. 




Definition des composants associes a FLVPlayBack 

Voici les commandes disponibles sous la forme de boutons predefinis, depuis la fenetre Composants 
et leur definition : 

■ BackButton. Bouton qui permet theoriquement de rembobiner le flux video. En realite, il renvoie a la 
premiere image du flux video (en progressif). 

■ Buff eringBar. Barre de progression de mise en cache de la video. Elle avance a mesure que la 
video est chargee dans le cache du navigateur et signale a I'utilisateur la possibility de naviguer a 
I'interieur du flux deja mis en cache. 

■ CaptionButton. Utilise avec le composant FLVPlayBack Captionning pour realiser des sous- 
titrages (voir Chapitre 8). 

■ ForwardButton. Bouton d'acceleration de la lecture de la video. Attention, en flux progressif, 
seule la partie deja chargee peut etre atteinte par I'utilisateur. 

■ FullScreenButton. Active lAffichage en mode plein ecran du contenu video (voir aussi le Cha- 
pitre 1 5 pour la gestion du mode d'affichage en plein ecran). 

■ MuteButton. Permet de stopper I'audio et de le reactiver, sur le meme bouton. 

■ PauseButton. Arrete la lecture du flux video, sans interrompre la connexion au serveur. La mise 
en cache se poursuit de maniere transparente. 

■ PlayButton. Lit ou reprend la lecture d'un flux video. 

■ PlayPauseButton. Propose sur le meme bouton, une fonctionnalite de lecture de la video lorsque 
celle-ci est en pause, et de mise en pause lorsqu'elle est en lecture. 
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SeekBar. Barre de progression de la lecture de la video. A la difference du composant Buffering- 
Bar, la barre affiche la position courante de la video dans la scene. L'utilisateur peut deplacer la 
tete de lecture pour atteindre un autre extrait de la bande video, dans la mesure, toujours, ou le 
contenu appele en flux progressif est deja charge par le navigateur. 

StopButton. Arrete la lecture video et interrompt aussi son chargement. Cela libere le canal et 
les ressources graphiques sollicitees pendant la lecture de la video. 

VolumeBar. Modifie le volume sonore de I'audio inclus dans la video. 




II se peut que vous cherchiez a integrer une video dans un fichier SWF lui-meme importe dans un 
autre document SWE Le fait de supprimer le SWF charge dans la liste d'affichage (avec removeChild) 
ne permet pas, dans ce cas, d'interrompre la lecture de la video. Pour ce faire, il convient d'associer, a 
la video, des controles supplementaires en ActionScript. Nous detaillons ces controles au chapitre 
suivant. 



A retenir 

■ Le composant FLVPlayBack met a disposition des consoles de lecture de la video, personnalisables 
si Ton edite le FLA utilise pour les generer, a partir du document source disponible dans le dossier de 
I'application Flash. 

■ Des boutons composants sont utilisables individuellement et peuvent etre personnalisees directe- 
ment depuis I'interface auteur, dans le scnario. II ne requierent en outre aucune programmation 
specifique pour fonctionner. 



Creer un lecteur video H-264 pour Flash 6 et plus 

Si l'utilisation du composant offre une plus grande souplesse de manipulation pour des for- 
mats standards comme le FLV et le F4V, il ne permet pas de lire des fichiers video codes en 
H-264 avec des versions de documents anterieures a la version 10 (CS4), car le codec H-264 
n'est implements dans le composant FLVPlayBack que depuis cette version. 

Pour permettre de lire un flux HD (H-264) dans des versions de Flash anterieures a 
Flash 10, nous creons un lecteur video manuellement, en ActionScript, a l'aide de la classe 
NetStream. Cette classe etant apparue avec Flash 6, nous pouvons programmer 1'affichage 
de la video en haute definition a partir de Flash 6 et pour les versions ulterieures. 



Exemples > ch7_videoHD_4-fla 



Dans le document "ch7_videoHD_4.fla", sur la scene, apparait une video vide et transpa- 
rente. C'est un objet video importe de la bibliotheque et utilise avec la classe NetStream 
(voir Figure 7.20). A droite et en bas, deux boutons lire_btn et pause_btn sont super- 
poses. 
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Figure 7.20 

Apercu de la 
scene principale. 




Dans la fenetre de scenario, au-dessus du caique f ond_mc, un caique affiche l'objet video. 
Deux caiques distribuent respectivement les deux boutons lire_btn et pause_btn. Un 
autre caique affiche les actions (voir Figure 7.21). 



Figure 7.21 
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Les proprietes du document affichent enfin un format d'exportation Flash 6 et ActionScript 
en version 2 (voir Figure 7.22). 

Les objets video sont nativement disponibles dans tous les documents Flash, depuis la 
bibliotheque. L'objet qui figure dans ce document est done extrait de la bibliotheque. Pour 
extraire un objet video de la bibliotheque, procedez comme suit : 

1. Affichez la bibliotheque (Fenetre > Bibliotheque ou Cmd+L sur Mac ou Ctrl+L sur 
Windows). 

2. Pour inserer un objet video, supprimez eventuellement l'objet deja en place sur la scene 
et dans la bibliotheque. 

3. Dans le menu contextuel de la bibliotheque, selectionnez l'option Nouvelle Video (voir 
Figure 7.23). 

4. Dans la boite de dialogue, attribuez un nom d'objet, par exemple ecranVideo (voir 
Figure 7.24). Puis validez. 
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Figure 7.22 

Apercu des 
proprieties de la 
scene principale. 
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5. Le nouvel objet apparait dans la bibliotheque (voir Figure 7.25). 



Figure 7.25 
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6. Glisser-deposez cet objet sur la scene et, depuis l'lnspecteur de proprietes, donnez-lui 
un nom d'occurrence, par exemple : ecranVideo. Puis, redimensionnez-le a la taille du 
flux video a importer, par exemple 800 x 450 pixels (voir Figure 7.26). 



Figure 7.26 
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Dans la fenetre Actions, nous pouvons lire le code suivant, en ActionScript 2 : 

// Lecteur video Flash 6 
connexion = new NetConnection( ) ; 
connexion . connect (null) ; 

chargementContinu = new NetStream(connexion) ; 
ecranVideo. attachVideo(chargementContinu) ; 
chargementContinu . play ( " gKaster/gKaster- amusement .f4v" ) ; 

// gestion du bouton Play/Pause 

lire_btn ._visible=f alse; 
pause_btn ._visible=true; 

lire_btn.onPress=function () { 
chargementContinu . pause( ) ; 
lire_btn ._visible=f alse ; 
pause_btn ._visible=true; 

} 

pause_btn . onPress=f unction () { 
chargementContinu . pause( ) ; 
lire_btn ._visible=true ; 
pause_btn ._visible=f alse; 

} 

Ce code est structure en deux parties. La premiere gere l'affichage de la video. La seconde 
organise les boutons lire_btn et pause_btn qui controlent la video. 

Dans la premiere partie, nous specifions d'abord, sans typage specifique (AS2 autorise), une 
variable intitulee connexion qui designe 1' activation d'un flux Internet distant : 

connexion = new NetConnection( ) ; 

Plus loin, nous initialisons cette connexion : 

connexion . connect (null) ; 

La valeur null, renseignee en parametre, specifie que Ton se connecte en relatif sur le 
meme emplacement que la source SWF. Sinon il serait egalement possible d'user de http:// 
ou de rtmp:// pour designer une reference absolue. 

Puis, nous creons une deuxieme variable qui active le transfert d'un flux a chargement pro- 
gressif (faux streaming). Nous precisons, en parametre de la methode NetStream que ce 
flux concerne la connexion prealablement definie : 

chargementContinu = new NetStream(connexion) ; 

Nous attachons ensuite ce flux progressif a l'occurrence video qui figure sur la scene 
(ecranVideo) : 

ecranVideo. attachVideo( chargementContinu) ; 

Enfin, nous specifions que ce flux doit lire le fichier localise dans le chemin defini entre les 
guillemets : 

chargementContinu. play( "gKaster/gKaster-amusement.f4v" ) ; 

Meme si le format F4V, comme nous l'avons precise, n'est pas reconnu dans les anciennes 
versions de Flash, ce qui est appele ici est bien un fichier encode en H-264. Flash, en realite, 
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fait abstraction de l'extension lors de la lecture de videos. C'est pourquoi nous pouvons 
appeler directement le fichier nomme F4V. Le composant FLVPlayBack des anciennes 
versions ne sait pas interpreter le F4V, mais la classe NetStream, elle, le fait. 

Dans la seconde partie du code, deux actions controlent chaque bouton individuellement. 
Le premier, lire_btn, se masque lui-meme et affiche le bouton pause_btn. Simultanement, il 
reprend la lecture la oil elle etait arretee grace a la methode pause ( ) : 

lire_btn.onPress=function () { 
chargementContinu .pause ( ) ; 
lire_btn ._visible=f alse; 
pause_btn ._visible=true; 

} 

De meme, le bouton pause_btn se fait disparaitre et reaffiche le bouton lire_btn tout en 
interrompant la lecture en cours : 

pause_btn . onPress=f unction () { 
chargementContinu .pause ( ) ; 
lire_btn ._visible=true; 
pause_btn ._visible=f alse; 

} 

A 1' initialisation, puisque la video est lue des le chargement, juste avant les actions atta- 
chees aux deux boutons, nous specifions que le bouton pause_btn est visible et que 
lire_btn est masque : 

lire_btn ._visible=f alse; 
pause_btn ._visible=true; 

En publiant le document, la video F4V joue instantanement en haute definition dans un 
document Flash 6 code en ActionScript 2. Les boutons lire et pause controlent la video (voir 
Figure 7.27). 

Figure 7.27 

Lecture d'une 
video Quick Time 
H-264 dans un 
document Flash. 
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A retenir 

■ II est possible de publier une video en haute definition pour un lecteur Flash 6 ou de version ulte- 
rieure. Pour cela, nous utilisons la classe NetStream. 

■ Pour controler la lecture du flux video HD avec NetSt ream, nous codons et exportons en ActionScript 2. 

Agrandir une video sans perte 

La difficulte de la video pour le Web reside dans le bon compromis entre une compression 
avec une contenu accessible et une qualite qui, elle, valorise le contenu au detriment de 
l'accessibilite. Avec des videos traitees en haute definition, le compromis devient presque 
impossible a resoudre dans des contextes ou 1' image est tres riche (presence de bruit 
continu, images toutes differentes, audio avec une belle amplitude, animation de duree 
consequente, etc). Pour permettre une compression forte tout en conservant l'illusion d'une 
image de qualite, il existe une astuce. Comme dans l'edition papier, et dans la presse quoti- 
dienne en particulier, pour compenser la perte engendree par une image allegee, nous lui 
appliquons une trame. 

Vous pouvez appliquer une trame dans Flash au moyen d'une image tramee et transparente 
placee dans un MovieClip auquel vous appliquez une propriete d'affichage de type Incrus- 
tation ou Produit. Mais, cela sollicite de maniere importante la carte video de l'utilisateur. 
Nous preferons alors integrer cette trame directement dans le flux video : 

1 . Dans un logiciel graphique, comme Photoshop, dessinez cette trame en reproduisant sur 
une image de dimensions identiques a celles de la video, un motif (un filet, un damier, 
des points, des croix ou un effet trame de demi-teinte, par exemple) - voir Figure 7.28. 

Figure 7.28 

Creation dans 
Photoshop d'une 
trame de type 
filaire. 
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2. Puis, exportez cette image en PNG-24, arm d'en preserver la transparence, en faisant 
Fichier > Exporter pour le Web et les peripheriques. 

3. Dans la boite de dialogue d'enregistrement, a droite, selectionnez l'option PNG-24 et 
specifiez bien une transparence en cochant cette option (voir Figure 7.29). 



Figure 7.29 

Exporter au 
format PNG-24, 
avec la transpa- 
rence. 




4. Dans After Effects par exemple, importez l'image en faisant Ctrl+I (Windows) ou 
Cmd+I (Mac). 

5. Puis, glissez l'image sur la video deja en place dans la scene (voir Figure 7.30). Au 
besoin, ajustez le parametre Mode disponible sur le caique dans le scenario, en choisis- 
sant un mode de type Produit, Incrustation ou autre. 



Figure 7.30 

Appliquer la 
trame sur la 
video, dans After 
Effects. 




6. Puis, encodez la video. 
Pour le logiciel Motion, procedez de meme. 

1. Depuis la fenetre Bibliotheque, glisser-deposez l'image realisee dans Photoshop sur 
votre scene. 

2. Puis, exportez la video au format Quick Time. 
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A retenir 

■ Pour agrandir une video, nous conservons une compression forte, mais compensons I'affichage par 
I'ajout d'un tramage. 

■ II est preferable d'integrer ce tramage dans le flux du signal video plutot que dans le document 
Flash afin d'optimiser les ressources graphiques de I'utilisateur. 

Synthese 

Dans ce chapitre, vous avez appris a gerer I'affichage de flux video en haute definition, 
codes en H-264, avec Adobe Media Encoder ou tout autre type de source et notamment avec 
les solutions Apple. Vous avez egalement appris a integrer une video HD pour les anciennes 
versions de Flash, jusqu'a la version 6. Vous avez appris a personnaliser les boutons de 
controle de lecture d'une video et a contourner les contraintes de poids liees a une forte 
compression grace a des astuces inspirees de l'univers de la presse. Vous etes a mesure de 
realiser desormais des sites contenant des videos de qualite professionnelle et haut de gamme, 
compatibles avec toutes les configurations d'utilisateur. 
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Introduction 

Tout l'interet de l'integration de la video dans Flash, qu'elle soit standard, composite ou en 
haute definition, est qu'en plus d'offrir un espace confortable pour son affichage, vous pou- 
vez y associer des comportements. Dans ce chapitre, nous allons voir comment interagir 
avec la video aussi bien a travers la navigation (sur actions de l'utilisateur) qu'a travers des 
evenements (sur des actions executees par la video durant son deroulement). En plus de 
toute cette interactivite, nous allons aborder la maniere de realiser une boucle et comment, 
dans le contexte de contenus SWF imbriques, interrompre reellement le flux video. A 
Tissue du chapitre, vous serez en mesure de creer des interfaces video interactives riches, en 
ligne, mais aussi pour des systemes hors ligne. 

Dans ce chapitre, nous utilisons la bande demo de la societe gKaster, genereusement mise a 
disposition pour cette presentation (www.gKaster.com). 

Controles de base de la video 

Les premieres actions necessaires pour la gestion d'une video sont les controles de lecture. 
Dans cette premiere section, nous abordons les actions qui permettent de lire, arreter, acce- 
lerer et rembobiner un flux video, mais aussi modifier le volume sonore d'une video associee a 
un composant FLVPlayBack. 

Exemples > ch8_videolnteractive_l .fla 

Dans le document "ch8_videoInteractive_l.fla", sur la scene, un composant video joue 
la bande demo de la societe gKaster. Au-dessous, une console contient differents bou- 
tons qui controlent le flux video (voir Figure 8.1). Dans cette console, chaque symbole 
est dispose sur un caique separe et possede un nom d' occurrence lui permettant de rece- 
voir une action. Le symbole audio_mc, lui, contient deux MovieClip qui affichent cha- 
cun un etat active ou non active, pour le controle du son. lis possedent egalement leur 
propre nom d' occurrence. 

Dans la fenetre de scenario de la scene principale, au-dessus du caique f ond_mc, apparaissent 
la console, le composant et un caique actions (voir Figure 8.2). 
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Figure 8.1 

Apercu apres 
publication. 




Dans le caique actions, nous pouvons lire le code suivant : 

// lecture automatique 
ecranVideo. autoPlay=true; 

// mise en cache 
ecranVideo. buff erTime=3000; 

// lire 

console_mc . lire_btn . addE vent List ener(MouseEvent .CLICK, j ouerVideo) ; 
function jouerVideo (evt :MouseEvent) { 
ecranVideo. play( ) ; 

} 

// arreter 

console_mc . stop_btn . addE vent List ener(MouseEvent .CLICK, stopperVideo) ; 
function stopperVideo (evt:MouseEvent) { 
ecranVideo. stop() ; 

} 

// suite 

console_mc . suite_btn . addE vent Listener (MouseEvent .CLICK, suit eVideo) ; 
function suiteVideo (evt :MouseEvent) { 

ecranVideo . seek (ecranVideo . playheadTime+2) 

} 
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// retour 

console_mc . retour_btn . addEvent List ener(MouseE vent .CLICK, retourVideo) ; 
function retourVideo (evt :MouseEvent) { 

ecranVideo . seek(ecranVideo . playheadTime-2) 

} 

// Audio 

console_mc . audiojnc . audioOf f _mc . visible=f alse ; 
console_mc . audio_mc . audioOf f_mc . butt onMode=t rue ; 

console_mc . audiojnc . addE vent List ene r (MouseEvent . CLICK, audioVideo) ; 
function audioVideo (evt :MouseEvent) { 
if ( ecranVideo. volume>0) { 

ecranVideo . volume=0 ; 

evt .target . visible=f alse ; 

consolejnc . audiojnc . audioOf f_mc . visible=true ; 
} else { 

ecranVideo. volume=1 ; 

evt . target . visible=f alse ; 

consolejnc . audiojnc . audioOn jnc . visible=t rue ; 

} 

} 

Voici le descriptif detaille des differentes fonctionnalites rassemblees dans cette console. 



Lecture automatique 

La premiere ligne specifie si le composant nomme ecranVideo doit jouer automatiquement 
des l'affichage de l'animation (true) oil s'il doit attendre une action de l'utilisateur 
(false). L' action est activee sur true. La video joue done automatiquement des la 
publication : 

// lecture automatique 
ecranVideo.autoPlay=true; 



Mise en cache 

Une seconde action affecte directement le signal video controle par le composant video. 
C'est la mise en cache. La propriete bufferTime permet d'indiquer le nombre de millisecondes 
a attendre avant d'executer la lecture du flux video. Cette indication permet de reduire les 
risques de rupture de flux pour les connexions faibles. Ici, la valeur portee a 3 000 designe une 
attente de trois secondes avant le demarrage de la video : 

// mise en cache 
ecranVideo. buff erTime=3000; 

La valeur assignee par defaut a la propriete bufferTime est 5 000. Elle ne peut pas etre 
modifiee depuis l'lnspecteur de composants. 
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Lire la video 

Plus loin, un ecouteur est attache au symbole bouton lire_btn et indique de lire le flux 
video avec Taction play ( ) : 

// lire 

console_mc . lire_btn . addE vent List ener (MouseEvent .CLICK, jouerVideo) ; 
function jouerVideo (evt :MouseEvent) { 
ecranVideo.play() ; 

} 

Arret de la video 

A la suite, un ecouteur est attache au symbole bouton stop_btn et indique de stopper la 
progression du flux avec Taction stop ( ) : 

// arreter 

console_mc . stop_btn . addE vent List ener (MouseEvent .CLICK, stopperVideo) ; 
function stopperVideo (evt:MouseEvent) { 
ecranVideo.stop() ; 

} 

stop interrompt egalement la mise en cache. Pour arreter et reprendre la lecture de la video 
sans interrompre sa mise en cache, utilisez pause ( ) . 

Accelerer la video 

II est possible d'accelerer la lecture de la video en positionnant la tete de lecture de la video 
a une image plus eloignee que Timage courante. Pour effectuer ce calcul, nous affectons 
d'abord la propriete playheadTime au composant video pour permettre de capturer la posi- 
tion courante de la tete de lecture. Puis, nous augmentons la valeur, obtenue par cette pro- 
priete, de quelques images ou secondes. Nous passons ensuite directement cette valeur en 
parametre de la methode seek() qui permet de repositionner la tete de lecture dans la 
video : 

// suite 

console_mc . suite_btn . addE vent Listener (MouseEvent . CLICK, suit eVideo) ; 
function suiteVideo (evt :MouseEvent) { 

ecranVideo . seek(ecranVideo . playheadTime+2) 

} 

Les valeurs que nous passons en parametre sont des nombres. La methode seek( ) renvoie 
la tete de lecture a une position qui correspond toujours a T image-cle suivante la plus pro- 
che dans le flux video. La precision du ciblage depend done directement du nombre d'images- 
cles encodees dans le flux video. 

La video que nous traitons a ete encodee avec un nombre d'images-cles defini sur Automa- 
tique. Cette valeur, dans Adobe Media Encoder, specifie en realite un intervalle de deux 
secondes entre chaque image-cle. Pour obtenir une navigation plus precise que par pas de 
deux secondes, il convient done de revenir sur la compression en modifiant cette valeur a un 
intervalle plus serre. Rappelez-vous cependant que plus un intervalle est serre, plus Tenco- 
deur ajoute des images-cles. Or, chaque image-cle augmente le poids et, a poids egal, a taux 
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de compression egal, a debit egal, l'ajout d'images-cles reduit la place disponible pour 
encoder les autres images. Cela deteriore done l'ensemble de la video. Un paradoxe que 
Ton peut resoudre tres simplement : en augmentant les valeurs des reglages de compression 
et de debit. 

Le pas d' incrementation utilise dans notre exemple est 2 (deux secondes). La tete de lecture 
est done deplacee a 1' image -cle la plus proche a deux secondes d'intervalle apres la position 
courante du flux video et reprend la lecture de la video a partir de cette image. 

Dans notre exemple, le repositionnement appelle done toujours la deuxieme image -cle 
situee apres la position courante de la tete de lecture et poursuit la lecture de la video a partir 
de cette image, car e'est toujours l'image-cle suivante, la plus proche de 1' image invoquee, 
qui est affichee. 

Notez qu'une valeur de recherche elevee et une video avec des plans assez longs peuvent 
contribuer a masquer le manque de precision induit par la methode seek ( ) et par un type de 
compression impliquant un faible nombre d'images-cles. 

Rembobiner la video 

De la meme maniere que nous pouvons accelerer la video, nous la rembobinons avec la 
methode seek() et la propriete playheadTime. Mais, ici, nous retranchons la valeur a la 
position courante du flux video de sorte a revenir deux seconde en arriere, a chaque clic sur 
le bouton retour : 

// retour 

console_mc . retour_btn . addEvent List ener(MouseE vent .CLICK, retourVideo) ; 
function retourVideo (evt :MouseEvent) { 

ecranVideo . seek(ecranVideo . playheadTime-2) 

} 

Modifier le volume audio 

La methode volume ( ) permet de modifier le volume sonore global de la video. La valeur a 
passer en parametre est 1 pour un volume normal et 0 pour un son muet. Les valeurs deci- 
males intermediaries permettent de nuancer le volume. 

Dans notre exemple, dans le MovieClip consolejnc, nous pouvons identifier le symbole 
audio_mc. Ce dernier contient lui-meme deux autres clips dont audioOf f _mc qui affiche un 
trait rouge et audioOn_mc qui reste neutre. 

Nous specifions ici qu'en cliquant sur chaque symbole contenu dans audiojnc (evt .tar- 
get), nous modifions le volume audio de la video. Au premier clic, le son devient muet, et 
au suivant, il redevient normal, et ainsi de suite. Une condition permet de verifier si le 
volume est deja muet ou non et inverse la valeur selon le resultat. 

Pour que le dispositif soit plus ergonomique, nous ajoutons un controle de visibilite sur cha- 
cun des boutons de sorte que l'un disparait a chaque fois qu'on 1' active, et laisse alors 
1' autre prendre sa place : 
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// Audio 

console_mc . audio_mc . audioOf f _mc . visible=f alse ; 
console_mc . audio_mc . audioOf f_mc . butt onMode=t rue ; 

console_mc . audiojnc . addE vent List ener (MouseEvent .CLICK, audioVideo) ; 
function audioVideo (evt :MouseEvent) { 
if (ecranVideo.volume>0) { 

ecranVideo. volume=0; 

evt . target . visible=f alse ; 

consolejnc . audiojnc . audioOf f_mc . visible=t rue ; 
} else { 

ecranVideo. volume=1 ; 

evt . target . visible=f alse ; 

consolejnc . audiojnc . audioOn jnc . visible=t rue ; 

} 

} 



Augmenter et diminuer progressivement le son 

©Exemples > ch8j/ideolnteractive_2.fla 

Nous avons vu qu'il est possible de modifier une valeur en Pincrementant au sein d'un 
gestionnaire de type Event . ENTER_FRAME (voir Chapitre 1). Vous pouvez done aussi 
modifier le son, sur action utilisateur, en appelant un ecouteur qui active la modification 
de P audio tant que celui-ci n'atteint pas une certaine valeur. Nous utilisons pour ce faire 
un gestionnaire de type Event . ENTER_FRAME et des structures conditionnelles. Nous 
obtenons ceci : 

// Audio 

consolejnc . audiojnc . audioOf f _mc . visible=f alse ; 
consolejnc . audiojnc . audioOf f _mc . butt onMode=t rue ; 

consolejnc . audiojnc . audioOnjnc . addEventListener (MouseEvent . CLICK, f onctionBaisser) ; 
function f onctionBaisser (evt :MouseEvent) { 

addEventListener (Event . ENTER J^RAME, reduireAudio) ; 

} 

// 

function reduireAudio (evt:Event) { 
if (ecranVideo. volume>0) { 
ecranVideo. volume-=0. 01 ; 
trace (ecranVideo .volume) 
if (ecranVideo. volume<=0. 01 ) { 
ecranVideo. volume=0; 

removeE vent List ener (Event . ENTER J^RAME, reduireAudio) ; 
consolejnc . audiojnc . audioOnjnc . visible=f alse ; 
consolejnc . audiojnc . audioOf f_mc . visible=true ; 

} 

} 

} 
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console_mc . audiojnc . audioOf f_mc . addEventListener ( MouseEvent . CLICK , f onctionMonter) ; 
function f onctionMonter (evt:MouseEvent) { 

addEventListener(Event . ENTER_FRAME,monterAudio) ; 

} 

// 

function monterAudio (evt:Event) { 
if (ecranVideo.volume<1 ) { 
ecranVideo. volume+=0.01 ; 
t race (ecranVideo .volume) 
if (ecranVideo. volume>=0. 99) { 
ecranVideo. volume=1 ; 

removeEventListener(Event . ENTER_FRAME, monterAudio) ; 
console_mc . audiojnc . audioOn_mc . visible=true ; 
console_mc . audiojnc . audioOf f _mc . visible=f alse ; 

} 

} 

} 

Dans cet exemple, chaque bouton execute une fonction qui lui est propre. Dans cette fonc- 
tion, le gestionnaire Event . ENTER_FRAME appelle une autre fonction. C'est alors que la 
valeur de 1' audio est, soit augmentee, soit diminuee, selon la fonction qui est executee (sui- 
vant le bouton qui est clique). Une fois que la valeur est integralement renversee, alors, une 
instruction interrompt la fonction. 

Pour modifier la vitesse de progression du volume, il suffit de modifier la valeur du pas 
decrementation, ici specifiee a 0 . 01 . 

A retenir 

■ II est possible de personnaliser une console de controle video en associant a des clips des fonctions 
qui affectent les proprietes du composant video en cours d'execution. 

■ II est possible d'accelerer ou de rembobiner une video en utilisant la propriete playheadTime et 
seek ( ) . Mais cette technique offre une precision relative au nombre d'images-cles encodees dans le 
flux video. 

■ II est possible de modifier le son d'un flux audio en controlant la propriete volume. Une variation 
progressive de I'audio peut etre effectuee grace a un gestionnaire de type Event . ENTER_FRAME. 



Chapitrage video 

La navigation au sein d'une video est tres simple a mettre en place. II suffit d'utiliser la 
methode seek() que nous venons deja de rencontrer. Nous specifions alors, en parametre 
de cette methode, le timecode a atteindre. Le timecode represente la position des images 
d'une video et s'exprime en secondes. Un timecode de 12 designe a la tete de lecture 
d'atteinte 1' image situee a la seconde 12 de la video. 

Naturellement, comme evoque plus haut, nous devons aussi considerer que le flux video 
dispose d'un nombre confortable d'images-cles ou alors, nous acceptons que le ciblage 
fluctue plus ou moins a une ou deux secondes pres. 
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Pour definir un timecode precisement, considerons l'exemple d'une video d'une cadence 
de 25 ips pour laquelle une image vaut 4 centiemes de secondes (100 centiemes de seconde / 
25 images = 0,04 seconde). Pour cette video, l'expression suivante appelle la soixante- 
septieme seconde : 

ecranVideo.seek(67) ; 

Mais, l'expression suivante appelle la troisieme image de la soixante-septieme seconde 
(soit 67 secondes + 3 x 0,04). Si l'image appelee n'est pas une image -cle, comme vu prece- 
demment, c'est l'image-cle suivante la plus proche qui est affichee et c'est a partir de cette 
image -cle que va se prolonger la video : 

ecranVideo.seek(67.12) ; 

Dans l'exemple suivant, nous utilisons la methode seek( ) a travers une serie de vignettes 
arin de creer un systeme de chapitrage. Mais, nous allons plus loin que dans la section pre- 
cedente en optimisant ici le code et en rassemblant d'abord toutes les conditions dans une 
seule et meme fonction. A l'interieur de cette fonction, nous ajoutons aussi une propriete 
qui permet de charger eventuellement une autre video, en lieu et place de la video active. 
Nous combinons done deux methodes : seek() etsource(). 

Exemple; ch8_videolnteractive_3 th 

Dans le document "ch8_videoInteractive_3.fla", sur la scene principale, se trouve un com- 
posant qui execute directement la video a la publication du document. En dessous, un menu 
est compose de plusieurs vignettes. Chacune de ces vignettes est isolee dans un MovieClip 
et possede un nom d' occurrence (voir Figure 8.3). 



Figure 8.3 

Apercu du 
document apres 
publication. 
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Dans le scenario, au-dessus de caique fond_mc, nous identifions le composant video, le 
menu et un caique actions (voir Figure 8.4). 

Figure 8.4 SCENARIO EDITED I 

Apercu du 

scenario de la ■ IKa 

tj menu_mc 

scene principale. ^ ecranVideo 

fond_mc 
aJ -I S 



Dans le caique actions, nous lisons le code suivant : 

var cheminVideo:String; 
var timeCode:Number=0; 

menu_mc.addEventListener(MouseEvent.CLICK,timeCode1 ) ; 
function timeCodel (evt:MouseEvent) { 
if (evt. target. name=="lien1_btn") { 

cheminVideo="gKaster/gKaster-demoreel . f4v" ; 

timeCode=0.2; 

} 

if (evt .target . name=="lien2_btn " ) { 

cheminVideo="gKaster/gKaster-demoreel . f4v" ; 
timeCode=10; 

} 

if (evt .target . name=="lien3_btn " ) { 

cheminVideo="gKaster/gKaster-demoreel . f4v" ; 
timeCode=19; 

} 

if (evt. target. name=="lien4_btn") { 

cheminVideo="gKaster/gKaster-demoreel . f4v" ; 
timeCode=45 ; 

} 

if (evt. target. name=="lien5_btn") { 

cheminVideo="gKaster/gKaster-demoreel . f4v" ; 
timeCode=66; 

} 

if (evt .target . name=="lien6_btn " ) { 

cheminVideo="gKaster/gKaster-demoreel . f4v" ; 
timeCode=92; 

} 

if (evt .target . name=="lien7_btn " ) { 

cheminVideo="gKaster/gKaster-demoreel . f4v" ; 
timeCode=119.04; 

} 

if (evt .target . name=="bonus_btn " ) { 

cheminVideo="gKaster/gKaster-amusement .f4v" ; 
timeCode=0; 

} 

ecranVideo . sou rce=chemin Video ; 
ecranVideo.seek(timeCode) ; 

} 
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Nous declarons en premier lieu deux variables : 

var cheminVideo:String; 
var timeCode:Number=0; 

La premiere designe une chaine de caracteres qui vehiculera le chemin d'un fichier video, 
disponible dans notre projet. Chaque lien clique va ainsi pouvoir renseigner cette valeur 
pour cibler le fichier qui lui est propre. Plus loin dans le code, une instruction reprend la 
valeur alors renseignee pour appeler le fichier correspondant avec la methode source () . 

La deuxieme variable est un nombre et initialise les timecodes avant qu'ils ne soient even- 
tuellement modifies a travers la fonction. 

Ensuite, un ecouteur est attache au menu et non aux vignettes elles-memes. Cela permet d'intro- 
duire des conditions qui definissent, selon Fobjet du menu qui est clique (evt .target . name), 
telle ou telle instruction (voir Chapitre 5 pour en savoir plus sur la propriete target) : 

if (evt. target. name=="lien1_btn" ) { 

cheminVideo="gKaster/gKaster-demoreel .f4v" ; 
timeCode=0.2; 

} 

La condition verifie que le nom de l'objet clique correspond bien a celui specifie entre 
parentheses. Lorsque la valeur est verifiee, la variable cheminVideo est renseignee, ainsi 
que le timecode. Une condition est cree pour chaque bouton. 

En fin de programme, les deux variables sont utilisees pour activer le chapitrage : 

ecranVideo. source=cheminVideo; 
ecranVideo.seek(timeCode) ; 

Vous remarquez le dernier bouton bonus, qui se distingue des autres en cela qu'il appelle un 
fichier different. Notez que nous executons le programme localement, et done, que les 
videos sont chargees instantanement. Nous pourrions done specifier un timecode pour cette 
nouvelle video. Mais, n'oubliez pas que Ton ne peut atteindre une image d'un fichier video 
que si l'image appelee est deja chargee. Nous ne recommandons done pas de specifier une 
autre valeur que 0 lorsqu'une nouvelle video est appelee. Le seul moyen de permettre 
d'atteindre directement une image d'une video non chargee est d'utiliser la technologie 
Flash Media Server, qui autorise la diffusion en vrai streaming (en continu). 

Nous remarquons ici que le chapitrage peut appeler indifferemment des sequences dans un 
meme flux video (avec seek) que plusieurs fichiers video distincts (avec source). Notez que 
la creation de flux separes (avec source) offre une plus grande souplesse dans la navigation, 
car l'ensemble de la video n'a alors pas besoin d'etre chargee pour permettre d'acceder a 
d'autres chapitres. Les references appelees a chaque requete (avec source) sont toujours de 
nouveaux flux video, independants, qui se substituent a la video en cours de lecture. Que les 
chapitres soient constitues de videos distinctes ou contenues dans une seul signal video, 
nous utilisons un seul, meme et unique, composant. 

Adobe propose une technologie serveur adaptee a la gestion de flux video haute definition en 
continu. Cette technologie se nomme Flash Media Server. Vous trouverez des informations sur son 
utilisation ainsi qu'un serveur de test d'hebergement a I'adresse suivante : http://www.streame- 
dia.eu/#news fr 5.html. 
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Chapitrage video avec les points de repere 

II est egalement possible de creer un systeme de chapitrage a partir de points de repere. Nous utili- 
sons alors la methode seekToNavCuePoint ( ) . Cette technique est plus precise car il est possible de 
controler la position des images-cles. Reportez-vous a la section "Synchroniser des actions avec les 
points de repere" pour en savoir plus sur cette methode. 




A retenir 

■ Pour creer un systeme de chapitrage simple, nous utilisons la methode seek(). Mais le nombre 
d'images-cles encodees dans le flux video determine la precision du ciblage. 

■ Le chapitrage peut appeler aussi bien des sequences dans un meme flux video que plusieurs fichiers 
video distincts. Mais, etant donne que le ciblage ne permet d'atteindre que les flux deja charges ou 
qui demarrent, I'option avec des fichiers separes demeure la plus confortable pour I'utilisateur. 



Sous-titrage video 

Flash met a disposition un composant qui simplifie la gestion des sous-titres de la video. 
Vous devez pour cela utiliser d'abord un composant FLVPlayBack pour y charger une video, 
puis, creer un fichier XML qui contient le texte pour les sous-titres en respectant un format 
bien defini. Enfin, vous devez ajouter sur la scene un composant FLVPlayBackCaptioning 
qui se charge de placer le texte du fichier XML dans le champ de texte de votre choix. 

Dans cet exemple, nous ajoutons des sous-titres qui accompagnent une creation autour d'un 
poeme de Dan Andersson - ecrivain suedois - (voir Figure 8.5). Les textes sont stockes 
dans un fichier XML. 



Figure 8.5 

Apercu du 
document apres 
publication. 
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Exemples > ch8_videolnteractive_4fla 



Dans le document "ch8_videoInteractive_4.fla", la scene principale affiche un composant 
video, un texte dynamique deja formate avec une typo embarquee (voir Chapitre 15 pour en 
savoir plus sur la typographie) et un composant FLVPlayBackCaptioning situe hors champ 
(voir Figure 8.6). Chaque objet possede un nom d'occurrence. La video appelee se nomme 
"gkaster-cl9.f4v". 



Figure 8.6 

Apercu de la 
scene principale. 




Dans la fenetre de scenario, au-dessus du caique f ond_mc, les trois objets sont clairement 
repartis vers des caiques distincts (voir Figure 8.7). 



Figure 8.7 

Fenetre de 
scenario de la 
scene principale. 
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Dans le caique actions, nous accedons au code suivant : 

composantSousTitres .f lvPlayback=ecranVideo; 
composantSousTitres . source="gKaster/sousTitres . xml" ; 
composantSousTitres . autoLayout=f alse ; 
composantSousTitres . captionTargetName="sousTitres_txt " 
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Dans le repertoire "gKaster" des exemples du livre, se trouve un document XML qui contient 
les sous-titres et repose sur la structure suivante : 

<?xml version="1 .0" encoding="UTF-8"?> 

<tt xml:lang="fr" xmlns="http: //www. w3.org/2006/04/ttaf 1 " xmlns:tts="http: //www. w3.org 
|» /2006/04/ttaf1#styling"> 

<head> 

</head> 

<body> 

<div xml:lang="f r"> 

<p begin="00:00:00.00" dur="00:00:03.00">gKaster <span tts:fontFamily="Verdana" 
tts : f ontSize= "+12" >C1 9</span></ p> 

<p begin="00:00:09.00" dur="00:00:03.00">Le soleil se leve a 1' horizon, </p> 
<p begin="00:00:12.45" dur="00:00:03.30">regarde, au bord du mont du village de 
paille.</p> 

<p begin="00:00:17.00" dur="00:00:02.30">Sur le fleuve fragile, degoulinent,</p> 
<p begin="00:00:20.30" dur="00:00:02.30">marchent, les hommes en silence. </p> 
<p begin="00:00:25.00" dur="00:00:02.30">Sous le ciel gris du matin frais,</p> 
<p begin="00:00:28.30" dur="00:00:04.00">des pas lourds foulent le sol jonche 
des roses. . .</p> 

<p begin="00:00:36.00" dur="00:00:03.00">Des tetes s'y plient comme a la 
priere,</p> 

"00:00:05. 00">loin des terres arrides s'est fait 



<p begin="00:00:40.00" dur= 
porter feu le poete.</p> 

<p beg in=" 00: 00: 52. 00" dur= 
sous la rosee,</p> 

<p begin="00:01 :00.30" dur= 

<p begin="00:01 :06.00" dur= 
a travers la foret verte du 

<p begin="00:01 :13.00" dur= 
s'eveille.</p> 

<p begin="00:01 :18.00" dur= 
demandant :</p> 

<p begin="00:01 :22.30" dur= 
lourd ?</p> 

<p begin="00:01 :32.00" dur= 



00:00:05. 00">Au travers de la clairiere verdoyante, 

00:00:04. 00">il a termine ses annees de douleur.</p> 
00:00:06.00">Mais quand le cercueil s'avance, noir, 
printemps</p> 

00:00:05. 00">Le silence traverse la nature qui 
00:00:04.00">Et la, le vent d'ouest s'arrete, en se 
00:00:05.00">Qui foule ces roses d'un pas si 



"00:00:06.00">Allez doucement, c'est peut-etre une 
fleur qui vient de mourir.</p> 

<p begin="00:01 :45.00" dur="00:00:06.00">Si j'etais Houragan, je 

l'accompagnerais jusqu'au bout du chemin.</p> 
</div> 
</body> 
</tt> 

Pour mettre en place un systeme de sous-titrage, il suffit de glisser-deposer une occurrence 
du composant FLVPlayBackCaptioning depuis la fenetre des composants (Fenetre > Com- 
posants) sur la meme scene que celle ou figure deja le composant de lecture du flux video 
FLVPlayBack. Puis, il faut lui attribuer un nom d'occurrence. Dans notre exemple, nous le 
nommons composantSousTitres. 
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Pour Her l'objet composantSousTitres a la video, dans le code, nous specifions : 

composantSousTitres .f lvPlayback=ecranVideo; 
Pour lui permettre d'identifier l'emplacement du fichier XML, nous ajoutons egalement : 

composantSousTitres . source="gKaster/sousTitres . xml" ; 

Nous avons la possibility de magnetiser le champ de texte dynamique sur la video (true) ou 
non (false). Pour que le champ de texte reste a sa position actuelle dans la scene, nous 
ecrivons : 

composantSousTitres . autoLayout=f alse ; 

Enfin, pour que le texte s'afhche dans un champ dynamique de notre propre creation, nous 
associons, a une derniere commande, le nom d'occurrence du texte dynamique place sur la 
scene : 

composantSousTitres . captionTargetName="sousTitres_txt " ; 

A defaut de specifier un champ de texte dynamique pour accueillir les legendes, le composant 
les affichera directement sur la video dans une zone rectangulaire de fond noir. 

L ensemble de ces instructions reprend les parametres du composant FLVPlayBackCaptioning 
egalement disponibles et parametrables depuis l'lnspecteur de composants. 

Dans le fichier XML (de type texte TT - Timed Text - mais au format XML), nous pouvons 
lire une structure proche d'une page HTML. Ce document repond en fait a une organisation 
normalised par le W3C (http://www.w3.org/AudioVideo/TT/). Tout en respectant la syn- 
taxe propre a ce formatage, il nous suffit d'ajouter autant de ligne que de sous-titres doivent 
apparaitre, et ensuite de renseigner chacune des proprietes. 

Le fichier XML que nous utilisons repose sur le mecanisme suivant. Pour chaque nouveau 
sous-titre, le composant requiert une balise <p></p> : 

<p begin="00:00:00.00" dur="00:00:03.00">gKaster 

<span tts: font Family=" Verdana" tts:fontSize="+12">C19</span></p> 

Dans cette balise, quatre attributs peuvent etre renseignes : begin, dur, end et style. Dans 
notre exemple, les deux premiers seulement sont utilises. 

• L'attribut begin sert a definir le timecode a partir duquel le titre doit apparaitre. 

• L'attribut dur designe la duree de ce sous-titre. 

• L'attribut end, qui se definit de la meme maniere que les deux precedents, designe le 
timecode de fin du sous-titre. II n'a pas lieu d'etre si Ton connait deja la duree. 

• L'attribut style, optionnel, permet de gerer le formatage des textes a partir de styles 
HTML de base. 

La gestion de l'affichage du sous-titre est precise, contrairement a la navigation utilisee avec 
la methode seek ( ) , car c'est le fichier XML qui determine le moment ou les textes doivent 
apparaitre et non les images-cles de la video. 

Le dernier attribut, style, permet d'appliquer un style dont nous pouvons definir le forma- 
tage dans l'en-tete du document <head></head>, en amont. Pour ce faire, nous utilisons la 
syntaxe suivante : 
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<head> 

<styling> 

<style id="style1" tts:fontSize="20"/> 
</styling> 
</head> 
<body> 

<div xml:lang="en"> 

<p begin="00:00:00.00" dur="00:00:03.00" style="style1 ">gKaster C19</p> 
</div> 
</body> 

Dans notre exemple, nous n'utiliserons pas les styles. En publiant le document Flash, la 
video est lue et des legendes se succedent les unes a la suite des autres, selon le timecode 
defini dans le fichier XML. 



Le composant CaptionButton 

Vous pouvez glisser-deposer le composant CaptionButton dans la meme scene que le composant 
FLVPlayBack Captionning. II permet a I'utilisateur de desactiver et reactiver I'affichage des sous- 
titres. Ce composant, comme les boutons de controle de la video, peut etre personnalise en double- 
cliquant dessus jusqu'a atteindre les objets graphiques qui le composent. 

Etendre les formatages du document XML pour les sous-titres 

Des options de formatage sont accessibles pour les donnees contenues dans le fichier XML des 
sous-titres. Ces formatages repondent a une norme precise et standardisee par le W3C. Vous 
trouverez le descriptif detaille de ces options et les balises a employer a I'adresse suivante : 

WS5b3ccc516d4fbf351e63e3d118a9c65b32-7ee5.html. 



A retenir 

■ II est possible de deployer simplement un systeme de sous-titrage grace a ('utilisation du composant 
FLVPlayBackCaptioning. 

■ La synchronisation avec le flux video est precise car c'est le code qui gere I'affichage et non les images- 
cles de la video. 

■ Des styles de formatage peuvent etre appliques aux textes des sous-titres, depuis Flash ou a partir de 
formatages definis dans le fichier XML. 



Boucle video 

Par defaut, une video geree avec un composant FLVPlayBack est lue de bout en bout sans 
boucler sur elle-meme. II peut etre interessant de permettre de relancer la video pour creer 
un flux ininterrompu. Pour cela, nous utilisons une classe qui detecte le comportement de la 
video. Cette classe se nomme videoEvent. 
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Dans cet exemple, nous utilisons une sequence video associee a une barre de progression, 
ceci arm de nous permettre, lors de la publication, de tester l'effet de boucle plus rapidement, 
en deplacant simplement la tete de lecture. 



Exemples > ch8_videolnteractive_5.fla 



Dans le document "ch8_videoInteractive_5.rla", la scene principale affiche un composant 
video nomme ecranVideo et des occurrences de composants de controle reparties vers des 
caiques distincts (voir Figure 8.8). 



Figure 8.8 

Apercu du 
scenario de la 
scene principale. 
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Dans la fenetre Actions, nous pouvons lire le code suivant : 

import fl. video. VideoEvent; 

// 

ecranVideo. addE vent Listener (VideoEvent .COMPLETE, boucleVideo) ; 
function boucleVideo (evt :VideoEvent) { 

ecranVideo. seek(0) ; 

ecranVideo. play() ; 

} 

D'abord, nous importons la classe VideoEvent qui permet de detecter le comportement 
du flux video. Puis, nous creons un ecouteur que nous attachons au composant FLV- 
PlayBack place sur la scene. Le gestionnaire d'evenements fait reference a la classe 
importee et invoque la propriete COMPLETE afin de detecter le moment ou la video est 
terminee. 

Lorsque la video est achevee, la fonction boucleVideo, appelee par l'ecouteur, execute 
deux instructions. La premiere, seek (0) , replace la tete de lecture a l'image 0. La seconde, 
play ( ) , indique de reprendre la lecture. 



A retenir 

■ II est possible de generer une boucle video a I'aide de la classe VideoEvent. II faut pour cela replacer la 
tete de lecture a l'image 0 et relancer la lecture de la video. 

■ En detectant la fin de lecture de la video, vous pouvez aussi associer d'autres actions, comme 
I'enchainement avec d'autres flux video ou I'affichage d'un autre contenu. 
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Enchainer plusieurs videos a la suite 

En detectant la fin de lecture d'un flux video, vous etes en mesure de placer d'autres instructions a la 
place du repositionnement de la tete de lecture comme nous I'avons fait ici. Par exemple, vous pou- 
vez tres bien invoquer un autre fichier video en vue de creer un enchafnement de plusieurs videos. 

Pour appeler une autre video, utilisez I'instruction : 

ecranVideo. source="cheminDeLaVideo.f4v" ; 

Pensez eventuellement y adjoindre I'instruction play( ), comme pour notre boucle, afin de garantir 
le redemarrage automatique de la lecture. 



Synchroniser des actions avec les points de repere 

Les points de repere (ou CuePoints) sont des marqueurs que Ton distribue tout au long de la 
video. lis permettent : 

• D'y associer des actions de controle de lecture de la video pour s'y referer comme dans 
un systeme de chapitrage (reperes de navigation). 

• D'y placer des evenements programmes en ActionScript (reperes d'evenements), qui 
planifient des actions dans le temps. 

Chacun des deux precedes requiert naturellement une video, mais aussi la creation des images- 
cles qui definissent le timecode sur lequel chaque repere doit etre place. 

II existe plusieurs techniques pour la creation de ces reperes : la premiere consiste a les inte- 
grer physiquement dans l'encodage du signal video, la deuxieme a les stacker dans un 
fichier XML appele ensuite avec ActionScript, la troisieme consiste a les definir directement 
dans la fenetre d'Actions du document par Flash et la quatrieme engage le remplissage 
manuel de la propriete cuepoints, disponible depuis l'lnspecteur de composants. 

• A l'interieur du flux video, les reperes sont introduits depuis After Effects, Premiere Pro 
ou Adobe Media Encoder. lis sont encapsules dans le fichier une fois celui-ci rendu, si 
bien que toute modification du timecode, d'un seul de ces reperes, induit de proceder a 
un nouveau rendu. Cette methode presenterait peu d'interet si elle ne permettait pas un 
ciblage precis pour les reperes de navigation. Dans ce contexte, en effet, a chaque fois 
que nous introduisons un repere de navigation, nous generons aussi une image-cle. II en 
resulte que cette methode est celle que nous preferons employer pour definir des reperes 
de navigation, car ils permettent de travailler avec une grande precision. Pour les reperes 
d'evenements, en revanche, les autres techniques restent plus confortables. 

• La creation d'un fichier XML peut etre interessante pour les cas oil un nombre eleve de 
reperes d'evenements est enregistre et ou la valeur du timecode de chacun de ces repe- 
res doit etre modifiee souvent. La gestion d'un fichier XML, dans ce cas precis, peut 
devenir interessante car elle epargne d' avoir a republier le document Flash pour le mettre a 
jour. Nous n'abordons pas cette methode dans notre ouvrage. 
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• La troisieme option consiste a generer les points de repere d'evenements directement 
dans la fenetre d' actions du document Flash. Cette technique est tres souple puisque, 
d'abord, le fait de dissocier les reperes du flux video va permettre de simplifier conside- 
rablement leur mise a jour. Ensuite, une ligne de code suffit par point de repere et, pla- 
ces en tete de la fenetre d'actions, toute mise a jour devient extremement simple a 
effectuer. 

• La quatrieme option, qui permet d'utiliser directement le composant, reprend le prin- 
cipe de la troisieme, mais n'offre pas la souplesse de manipulation du code ou nous 
pouvons plus facilement etablir des relations entre le nom des reperes que nous avons 
definis et les instructions a executer en regard des noms ajoutes. Nous n'abordons pas 
non plus cette derniere option dans notre ouvrage. 

Dans cette section, nous decrivons la methode de l'encodage dans le flux video, pour l'uti- 
lisation des reperes de navigation avec un ciblage precis. Plus loin, nous revenons sur un 
document Flash pour y introduire, en ActionScript, les reperes d'evenements dynamiques. 

Reperes de navigation 

Dans cet exemple, nous allons placer des reperes de navigation a l'interieur de la video 
demoreel de la societe gKaster de maniere a permettre une navigation precise. Cette video 
est initialement encodee en F4V. 

Les points de repere etant une fonctionnalite ajoutee par Adobe dans le format Flash video, 
cette fonctionnalite n'est malheureusement utilisable que pour le format FLV. En plus de 
definir les points de repere, nous allons done aussi modifier le format d'encodage de la 
video dont nous disposons. Ce qui nous permet surtout d'aborder la maniere d'encoder une 
video pour l'ajout de reperes de navigation. Naturellement, dans le cadre d'un projet reel de 
creation de contenu, nous vous recommandons de repartir de la source video non compressee 
pour obtenir un meilleur rendu. 

Pour cet exemple, nous reprenons le dispositif de chapitrage utilise prealablement avec la 
methode seek ( ) . Nous y remplacons, apres l'encodage, les references seek ( ) , imprecises, 
par une action de detection de reperes de navigation, plus precise, avec la methode seekTo- 
NavCuePoint ( ). 

Exemples > ch8_videolnteractive_6.fla 
Encoder la video 

Revenons d'abord sur l'encodage de la video : 

1. Lancez 1' application Adobe Media Encoder. 

2. Ajoutez, a la liste de rendu, la video intitulee gKaster-demoreel.f4v. 

3. Puis, cliquez directement sur le lien jaune de la colonne Predefinir, ou bien sur le bouton 
Reglages, pour ouvrir la fenetre de reglages (voir Figure 8.9). 
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Figure 8.9 

Reglages 
d'exportation. 



Reglages d'exportation 





4. Dans la partie de droite, selectionnez l'onglet Multiplexeur puis activez l'option FLV. 

5. Depuis l'onglet Video, specifiez la cadence de l'image. Dans notre exemple, nous main- 
tenons une cadence d'origine a 30ips (voir Figure 8.10). 

Figure 8.10 

Choix de la 
cadence avant 
I'ajout de points 
de repere. 
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Dans l'encodeur, notez qu'il est important de determiner la cadence de la video a partir du 
champ Image, de l'onglet video, avant de creer les points de repere. Les points de repere 
sont ici calcules en fonction du nombre d'images par seconde prealablement defini. Si nous 
modifions la cadence de la video apres avoir genere les points de repere, comme nous 
configurons les points de repere a partir de donnees invariables, nous risquons de subir un 
decalage, voire, de ne pouvoir atteindre certaines sequences une fois le document Flash 
publie. Par exemple, nous specifions une cadence initiale a 30ips, et nous ajoutons un repere a 
l'image 29 de la enieme seconde. Si nous modifions, apres avoir ajoute le repere, la cadence de 
la video en la ramenant par exemple a 25ips, l'image 29 qui n'existe plus ne pourra etre trouvee. 

Verifiez ensuite que les dimensions de la video correspondent a la surface disponible dans 
notre document (800 x 450 pixels). 



hi 



Comment reactiver les champs de dimensionnement de l'encodeur ? L'encodeur etant un 
peu instable, vous pouvez avoir besoin de reactiver les options de reglage pour les editer. Dans le 
volet de gauche de la fenetre d'encodage, cliquez alors sur I'outil de recadrage, puis, dans l'onglet 
Sortie, selectionnez I'option Modifier la taille de sortie. Puis, revenez dans l'onglet Source et desactivez 
I'outil de recadrage. 



Ajustez enfin legerement la compression de sorte que l'ajout d'images-cles ne reduise pas 
l'espace disponible pour coder les autres images, et done, n'altere pas la qualite globale de 
la video. Passez le debit minimum a 90. 

Une fois l'echantillonnage calibre, nous pouvons ajouter les reperes de navigation. 
Ajout des reperes de navigation 

Pour placer des reperes de navigation, nous devons revenir sur la partie gauche de la fenetre 
d'encodage Adobe Media Encoder. Pour chaque repere, nous positionnons la tete de lecture 
a l'emplacement voulu. Puis, nous ajoutons un repere en cliquant, dans la partie inferieure, 
sur le bouton Plus. 

Placez la tete de lecture au timecode 00;00;00;07 qui correspond a la septieme image. Pour 
controler la position de la tete de lecture avec precision, et glissez sur le timecode sans rela- 
cher le pointeur. Attention un simple clic rend le champs editable. Vous pouvez egalement y 
saisir manuellement une valeur, ou utiliser les fleches droite et gauche qui incrementent ou 
decrementent le time code de l'image. Si vous saisissez une valeur, pour confirmer son 
entree, cliquez ensuite dans une zone neutre de la fenetre. N'appuyez pas sur la touche 
Entree qui ferme la fenetre. 

La video etant initialement cadencee a 30 ips, le timecode s'arrete a l'image 30 et poursuit 
a la seconde suivante. La gestion du timecode ici n'est pas similaire a celle que nous avons 
controlee par ActionScript, qui est definie en secondes uniquement. 

1. Dans la partie inferieure de la fenetre, cliquez sur le bouton plus (+). Et, depuis le menu 
deroulant marque Evenement, selectionnez I'option Navigation. 

2. Une entree est enregistree et ajoutee a la liste. 

3. A gauche, cliquez sur le nom attribue par defaut, Point de signalement, pour le renommer. 
Saisissez par exemple : repere 1 (voir Figure 8.11). 
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Figure 8.11 

Ajout d'un repere 
de navigation. 



Procedez de meme pour 1' ensemble des reperes qui representent le debut de chaque 
sequence animee pour lesquelles nous disposons de vignettes dans le document Flash. Par 
exemple, placez la tete de lecture al'image 00;00;13;13 pour ajouter une image -cle au debut 
de la sequence qui correspond a la deuxieme vignette dans Flash. Puis cliquez a nouveau sur 
Plus (+), pour definir un nouveau repere (voir Figure 8.12) et ainsi de suite. 



Figure 8. 1 2 

Ajout d'un repere 
de navigation. 




Source 960 w X 540 h Sortie : BOO w X 450 h 

00;00;13;14 * ^ 
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Les timecodes suivants correspondent a l'ensemble des sequences identifiers dans le Flash, 
par des vignettes. Une video deja codee avec les reperes de navigation est disponible dans le 
dossier "gKaster" sous le nom "gKaster-demoreel-navigation.flv". 



00;00;00;07 


= reperel 


00;00;13;14 


= repere2 


00;00;17;27 


= repere3 


00;00;41;14 


= repere4 


00;01;05;10 


= repere5 


00;01;29;26 


= repere6 


00;01;58;07 


= repere7 



Confirmez l'encodage en cliquant sur OK. Choisissez le nom de sortie "gkaster-demoreel- 
navigation.flv" et remplacez eventuellement le document deja encode qui porte le meme 
nom. Puis lancez un rendu. 

En plus des images-cles generees automatiquement toutes les deux secondes, chaque point 
de repere que nous avons specifie en deviendra egalement une au moment de l'encodage. 
Nous pouvons maintenant reintegrer cette video au document Flash et y saisir les instructions 
de navigation. 

Detecter les points de repere avec ActionScript 

Avant de programmer la detection des points de repere, nous devons mettre a jour le compo- 
sant video en y rattachant la video exportee au format FLV. La video etant deja integree 
dans ce document, vous pouvez la remplacer en mettant simplement a jour la propriete 
source de l'lnspecteur de composants : 

1. Revenez dans Flash et ouvrez le document "ch8_videoInteractive_6.fla". 

2. Selectionnez le composant video. 

3. Dans l'lnspecteur de composants (Fenetre > Inspecteur de composants), modifiez la 
source en la cliquant deux fois. Puis, ciblez la video que vous venez d' encoder et qui 
contient vos points de repere de navigation (voir Figure 8.13). 

Figiire 8. 1 3 g FLVPIayback. <ecranVideo> ^ 
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Vous remarquez que l'lnspecteur de composants a detecte l'ensemble des reperes que nous 
avons integres dans la video, dans le parametre cuePoints. 

Revenez sur le caique actions. La fenetre affiche le code suivant : 

var repere:String=" " ; 

menujnc . addEvent List ener(MouseE vent .CLICK, atteindreRepere) ; 
function atteindreRepere(evt:MouseEvent) { 
if (evt . target . name=="lien1_btn" ) { 
repere="repere1 " ; 

} 

if (evt . target . name=="lien2_btn" ) { 
repere="repere2" ; 

} 

if (evt . target . name=="lien3_btn" ) { 
repere="repere3" ; 

} 

if (evt . target . name=="lien4_btn" ) { 
repere="repere4" ; 

} 

if (evt . target . name=="lien5_btn" ) { 
repere="repere5" ; 

} 

if (evt . target . name=="lien6_btn" ) { 
repere="repere6" ; 

} 

if (evt . target . name=="lien7_btn" ) { 
repere="repere7" ; 

} 

trace(repere) 

ecranVideo . seekToNavCuePoint ( repere) ; 

} 

De la meme maniere que nous avons distribue la methode seek ( ) dans les chapitres prece- 
dents, nous utilisons ici la methode seekToNavCuePoint ( ) . Nous specifions, en parametre, 
une valeur "chaine de caracteres" qui correspond au nom du point de repere de navigation 
ajoute dans l'encodeur, et ce, pour chaque lien. 

Publiez le document en faisant Cmd+ Entree (Mac) ou Ctrl+Entree (Windows). La video 
joue instantanement. En cliquant sur chacune des vignettes, le ciblage atteint precisement le 
timecode specifie dans le flux video. 

Reperes d'evenements 

Les reperes d'evenements ont pour objectif de planifier une action a l'interieur du document 
Flash, a mesure de la progression de la video. 

Comme pour les reperes de navigation, nous devons au prealable definir les reperes d'eve- 
nements avant d'ajouter les actions. Pour creer les reperes, nous pouvons les placer dans le 
flux video, comme vu pour la navigation ou bien les coder dynamiquement en ActionScript. 
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L'avantage a le coder repose sur l'idee suivante : un repere d'evenements, par rapport au 
repere de navigation, est independant du flux video. Si un repere de navigation doit etre 
dans la video, parce qu'il cible une image -cle precise de la video, le repere d'evenements, 
lui, vise une action, par nature independante de la video. Les reperes d'evenements n'ont 
done aucune raison d'etre encodes dans le flux video. En somme, les reperes d'evenements 
agissent un peu comme des drapeaux (flags ou labels), des declencheurs lus par la tete de 
lecture en meme temps que l'image a laquelle ils sont attaches, et ce, quelle que soit la 
teneur du flux video. II devient done plus judicieux de les traiter en ActionScript, et non en 
dur dans la video. Ainsi, nous pouvons utiliser une video au format F4V, de meilleure qua- 
lite, et non se limiter uniquement au format FLV, qui est le seul a gerer les points de repere. 

Dans cette section, nous allons voir comment associer a un composant qui cible une video 
enregistree en F4V, des reperes codes en ActionScript. Dans notre exemple, les actions que 
nous associons aux reperes permettent de repositionner un MovieClip blanc sous la vignette 
qui correspond a la sequence en cours de visualisation. A mesure que la video progresse, la 
vignette est repositionnee, a l'aide d'une interpolation de type TweenMax, sur la vignette 
suivante, et ce, jusqu'a la derniere. 



Exemples > ch8_videolnteractive_7.fla 



Le document "ch8_videoInteractive_7.fla" contient un composant qui appelle la video 
"gKaster-demoreel.f4v". Sous le composant, figure un menu compose de MovieClip posse- 
dant tous un nom d'occurrence. L'un d'entre eux, situe en arriere-plan, signale la progres- 
sion de la lecture. II est place sous la premiere image qui materialise la premiere sequence 
du flux video (voir Figure 8.14 et 8.15). 



Figure 8.14 

Apercu du 
document. 
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Figure 8.15 

Fenetre de 
scenario du sym- 
bole menu. 
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Dans le scenario, au-dessus du caique f ond_mc, nous retrouvons le composant et le menu 
(voir Figure 8.16). 



Figure 8.16 

Fenetre de 
scenario de la 
scene principale. 
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Dans la fenetre Actions, apparait le code suivant : 

// importation des classes 
import fl. video. MetadataEvent ; 
import gs.*; 
import gs. easing.*; 
import gs. events.*; 

// creation des points de repere 
ecranVideo. addASCuePoint (0, "reperel " ) ; 
ecranVideo. addASCuePoint(13. 14, "repere2" ) ; 
ecranVideo. addASCuePoint (17. 27, "repere3" ) ; 
ecranVideo. addASCuePoint (41 .14, "repere4" ) ; 
ecranVideo. addASCuePoint (65 . 10, "repereS" ) ; 
ecranVideo. addASCuePoint (89 . 26, "repere6" ) ; 
ecranVideo. addASCuePoint ( 1 18.07, " repere7" ) ; 



// traitement des actions 

ecranVideo. addEventListener (MetadataEvent .CUE_P0INT,ecouteRepere) ; 
function ecouteRepere(evt: MetadataEvent) { 
if (evt. info.name==" reperel ") { 

TweenMax.to(menu_mc.sequenceActive_mc, 2, {x:-300, ease:Strong.easeInOut}) ; 

} 

if (evt.info.name=="repere2") { 

TweenMax.to(menu_mc.sequenceActive_mc, 2, {x:-200, ease:Strong.easeInOut}) ; 

} 

if (evt.info.name=="repere3") { 

TweenMax.to(menu_mc.sequenceActive_mc, 2, {x:-100, ease:Strong.ease!nOut}) ; 
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} 

if (evt.info.name=="repere4") { 

TweenMax.to(menu_mc.sequenceActive_mc, 2, {x:0, ease : Strong. easelnOut} ) ; 

} 

if (evt.info.name=="repere5") { 

TweenMax.to(menu_mc.sequenceActive_mc, 2, {x:100, ease:Strong.easeInOut}) ; 

} 

if (evt.info.name=="repere6") { 

TweenMax.to(menu_mc.sequenceActive_mc, 2, {x:200, ease:Strong.easeInOut}) ; 

} 

if (evt.info.name=="repere7") { 

TweenMax.to(menu_mc.sequenceActive_mc, 2, {x:300, ease:Strong.easeInOut}) ; 

} 

trace (ecranVideo . playheadTime) 

} 

En premier, nous importons les classes necessaires. La classe MetadataEvent permet de 
gerer les metadonnees liees a un contenu video. Les classes Greensock gs permettent 
de creer les animations TweenMax, comme vu au Chapitre 2 : 

// importation des classes 
import fl. video. MetadataEvent; 
import gs.*; 
import gs. easing.*; 
import gs. events.*; 

A la suite, nous definissons les points de repere, un a un. II y en a sept. Chacun d'entre eux 
est structure ainsi : 

ecranVideo. addASCuePoint (0, "reperel " ) ; 
Nous ciblons d'abord le composant auquel ces reperes doivent etre associes avec le nom du 
composant video (ecranVideo). Puis, nous ajoutons un repere ActionScript avec la 
methode addASCuePoint, methode a l'interieur de laquelle deux parametres sont attendus 
dont le timecode (en secondes) et son nom (une chaine de caracteres). Decline pour chaque 
vignette, nous ob tenons : 

// creation des points de repere 
ecranVideo. addASCuePoint(0, "reperel " ) ; 
ecranVideo. addASCuePoint(13. 14, "repere2" ) ; 
ecranVideo. addASCuePoint (17. 27, "repere3" ) ; 
ecranVideo. addASCuePoint (41 .14, "repere4" ) ; 
ecranVideo. addASCuePoint (65 . 10, "repere5" ) ; 
ecranVideo. addASCuePoint (89 . 26, "repere6" ) ; 
ecranVideo. addASCuePoint (1 18. 07, "repere7" ) ; 

Une fois les reperes ajoutes, il reste a y associer des actions. Nous placons pour ce faire un 
ecouteur sur le composant ecranVideo, composant sur lequel nous venons d'attacher les 
reperes en ActionScript. Nous faisons directement reference aux points de repere vehicules 
par cette classe, avec la propriete CUE_PCTNT : 

// traitement des actions 

ecranVideo. addE vent Listener (MetadataEvent .CUE_POINT, ecouteRepere) ; 
function ecouteRepere (evt : MetadataEvent) { 

// actions sur chaque point de repere 

} 

A l'interieur du bloc d'instruction de la fonction, nous placons les actions a executer a cha- 
que fois que 1' ecouteur detecte un point de repere, quel qu'en soit le nom, quelle qu'en soit 
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la nature (evenement ou navigation). Pour distinguer une action d'une autre, nous utilisons 
une structure conditionnelle qui permet de specifier Taction a conduire en fonction du nom 
de chaque point de repere. Ce qui donne : 

// traitement des actions 

ecranVideo. addE vent Listener (Met adataEvent . CUE_POINT, ecouteRepere) ; 
function ecouteRepere(evt:MetadataEvent) { 
if (evt.info.name=="repere1 " ) { 

TweenMax.to(menu_mc.sequenceActive_mc, 2, {x:-300, ease : Strong. easelnOut} ) ; 

} 

} 

Si, le nom de l'objet (evt . info . name), identifie par l'ecouteur, correspond a une certaine 
valeur, alors, dans cet exemple, une interpolation de type TweenMax est executee et deplace 
le MovieClip blanc a une abscisse determinee, qui correspond a la position courante de la 
vignette. Nous declinons ce principe pour chacun des points de repere. 

A la fin de la fonction, une instruction permet de verifier la position du timecode au moment 
ou Taction est executee, avec la methode playheadTime, que nous avons deja abordee pour 
gerer T acceleration et le rembobinage en debut de chapitre : 

trace (ecranVideo .playheadTime) 

Nous avons utilise dans cette section une instruction pour generer dynamiquement des points de 
repere et permettre ('utilisation du format F4V Mais si la video etait au format FLV et contenait ses pro- 
pres reperes, fussent de navigation, la fonction que nous avons developpee fonctionnerait egale- 
ment. Les instructions liees a la creation des points de repere en ActionScript seraient simplement 
inutiles. La fonction, en effet, que les reperes soient inclus dans les metadonnees de la video ou crees 
dynamiquement en ActionScript, agit de la meme maniere. 

A retenir 

■ II est possible de creer un systeme de navigation precis en utilisant des points de repere de navigation 
encodes dans une video FLV 

■ Pour naviguer dans des points de repere encodes dans les metadonnees de la video, nous utilisons 
la methode seekToNavCuePoint ( ) ; . 

■ Les points de repere encodes dans un flux F4V ne sont pas pris en compte. 

■ II est possible de gerer des evenements ActionScript sur une video F4V a partir de points de repere 
ajoutes dynamiquement avec ActionScript. 

■ II est possible de generer des points de repere depuis I'lnspecteur de composants, dans I'onglet 
parametres, avec la propriete cuepoints, de la meme maniere que nous le ferions dans Adobe 
Media Encoder. 



Lire une video en arriere 

Lire une video Flash en arriere avec fluidite peut etre interessant dans le cadre d'une pre- 
sentation interactive graphiquement elaboree. Par exemple, un fabriquant de voitures, un 
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bagagiste de luxe, un joaillier, peuvent vouloir valoriser leurs creations dans une mise en 
scene fine realisable uniquement en video (lumieres, details, animation 3D avec radiosite 
et velocite, etc.)- En permettant alors a l'utilisateur de prendre la main sur le flux video 
pour le laisser se deplacer librement autour de l'objet filme ou modelise, celui peut contro- 
ler le sens de defilement de la tete de lecture dans la video, comme s'il naviguait dans un 
espace reel. 

Tant que l'utilisateur deplace la tete de lecture vers l'avant, la video reste fluide. Mais, lire 
un flux video en arriere aboutit generalement a une lecture saccadee de l'image, quelle que 
soit le type de programmation utilise, ceci me me avec des fichiers encodes avec 100 % 
d'images-cles, meme en jouant avec deux fichiers dont un projete a l'endroit et l'autre a 
l'envers. Le repositionnement aleatoire et de vitesse variable du pointeur, controle par l'uti- 
lisateur, implique une autre solution. 

La solution la plus fluide et la plus simple a deployer pour gerer une lecture video avant et 
arriere, consiste a integrer le flux video physiquement dans le document Flash et a en controler 
la lecture a l'aide d'un gestionnaire de type ENTER_FRAME. Pour rendre la lecture plus fluide, 
nous mettons egalement a jour l'affichage a chaque iteration. 

L integration d'une video a l'interieur d'un document Flash appelle cependant quelques 
recommandations : 

• La video doit de preference etre encodee en FLV et avec un nombre d'images-cles inte- 
gral (1 image -cle par image). Le FLV semble en effet plus permissif a la lecture arriere 
sur des images-cles pleines que ne Test un F4V. 

• L'integration d'une video dans Flash est techniquement limitee a 16 000 images, mais 
elle doit proposer un temps de chargement honorable. Done, pensez a placer, en amorce 
du document, une jauge de chargement qui avertisse l'utilisateur sur sa progression 
(voir Chapitre 5). 

• Au-dela de 2 Mo de poids pour votre document Flash, video comprise, reduisez les 
dimensions de la video. Diminuez sa duree. Compressez davantage son debit. 

• Nous ajoutons la methode updateAf terEvent ( ) pour fluidifier la lecture de la scene. 

Dans cette section, nous utilisons une video FLV qui represente une galaxie en mouvement. 
La sequence est courte et dure 179 images (soit 7,16 secondes pour un flux a 25ips). Une 
fois compressee avec une image -cle par image, le fichier ne pese que 1,4 Mo. Dans cet 
exemple, un curseur est positionne sur l'ecran pour que l'utilisateur prenne la main sur le 
contenu et naviguer comme bon lui semble a l'interieur du flux video. 

Exemples > ch8_videolnteractive_8.fla 

Dans le document "ch8_videoInteractive_8.fla", un MovieClip intitule video_mc contient 
une sequence video importee. La sequence video est etendue integralement dans le scenario 
de ce MovieClip. Sur la scene principale, le symbole console_mc contient un autre Movie- 
Clip nomme curseur_mc (voir Figure 8.17). 
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Figure 8.17 

Apercu du 
document. 




Ui m 



h I 



Pour integrer physiquement une video dans le scenario, faites Fichier > Importer > Importer de la 
video. Puis, cliquez sur Parcourir pour selectionner le fichier video deja compresse au format FLV 
Selectionnez I'option Incorporer le fichier FLV dans le SWF et le diffuser dans le scenario. Puis cliquez 
sur Continuer. Choisissez alors de I'inclure de preference dans un clip. Puis, confirmez jusqu'a la fer- 
meture de la boite de dialogue. 



Dans le scenario, au-dessus du caique f ond_mc, nous pouvons identifier les objets clairement 
repartis sur des caiques distincts (voir Figure 8.18). 



Figure 8.18 

Fenetre de 
scenario. 
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Le caique actions affiche le code suivant : 

// initialisation 

video_mc.stop( ) ; 

var pourcentage:Number; 

var posit ionTeteDeLectu re : Number=0 ; 

var initMouseX: Number=console_mc . curseur_mc . x ; 

// scroll 

var zoneDeDeplacement : Rectangle = new Rectangle(10, 0,780,0) ; 
console_mc.curseur_mc.addEventListener(MouseEvent .M0uSE_D0WN, activerDeplacement) ; 
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function activerDeplacement(evt:MouseEvent) { 

addEventListener(Event . ENTER_FRAME, jouerVideo) ; 
console_mc . curseur_mc . startDrag (false, zoneDeDeplacement) ; 
evt . updateAf terEvent ( ) ; 

} 

addEventListener (MouseEvent . MOUSEJJP, stopperDeplacement) ; 
function stopperDeplacement(evt:MouseEvent) { 
evt . currentTarget . stopDrag ( ) ; 

removeE vent List ener( Event . ENTER_FRAME, j ouerVideo) ; 

} 

// jouer la video 

function jouerVideo (evt:Event) { 

pourcentage=Math.ceil( (console_mc.curseur_mc.x-initMouseX) / (stage. stageWidth/ 100) ) ; 

posit ionTet eDeLecture=Math. ceil (pourcent age* (video_mc. tot alFrames/ 100) )-10; 

video_mc . got oAndStop( posit ionTeteDeLectu re) ; 

} 

Pour bien comprendre la mecanique du curseur, nous devons d'abord considerer que le clip 
qui accueille la video comporte un certain nombre d'images (179). De meme, le curseur qui 
se deplace dans la console est mobile sur une certaine largeur (de 10 a 780 pixels). Nous 
devons done, comme nous l'avons fait pour l'ascenseur au Chapitre 2, creer une equation 
qui convertit la position du curseur en numero d' image a atteindre. 

Le programme demarre avec, dans les premieres lignes du code, une instruction qui inter- 
rompt la lecture du clip video, avec un stop. Nous initialisons ensuite deux variables nom- 
bre que nous utilisons plus loin pour le calcul du rapport entre la position du curseur et celle 
de la tete de lecture a l'interieur du clip video. La troisieme variable, nommee initMouseX 
enregistre la position de depart du curseur, en X : 

// initialisation 

video_mc.stop( ) ; 

var pourcentage:Number; 

var posit ionTeteDeLectu re : Number=0 ; 

var initMouseX: Number=console_mc . curseur_mc . x ; 

Plus loin, nous definissons les actions qui permettent de gerer le defilement du curseur le 
long de l'axe represents, dans notre document, par un filet blanc : 
// scroll 

var zoneDeDeplacement : Rectangle = new Rectangle(10, 0,780,0) ; 

console_mc . curseurjnc . addEventListener (MouseEvent .M0USE_D0WN , activerDeplacement ) ; 
function activerDeplacement(evt:MouseEvent) { 

addEventListener(Event . ENTER_FRAME, jouerVideo) ; 

consolejnc . curseurjnc .startDrag (false, zoneDeDeplacement ) ; 

evt . updateAf terEvent ( ) ; 

} 

addEventListener(MouseEvent .MOUSEJJP, stopperDeplacement) ; 
function stopperDeplacement(evt:MouseEvent) { 
evt . currentTarget . stopDrag ( ) ; 

removeE vent Listener (Event . ENTER_FRAME, j ouerVideo) ; 

} 



La derniere commande de la fonction activerDeplacement utilise la methode update- 
Af terEvent ( ). Cette methode rafraichit la scene immediatement apres que les autres 
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instructions ont ete executees, a savoir, des que le emplacement du curseur a eu lieu. Cela 
rend le deplacement de l'objet plus fluide que si nous limitions le rafraichissement de l'affi- 
chage a un taux base uniquement sur la cadence de la scene (avec ENTER_FRAME). De meme, 
grace a cette methode, l'effet de deplacement dans la video est un peu plus fluide. 

Toujours dans la fonction activerDeplacement, une instruction appelle la fonction jouer- 
Video, detaillee plus bas, qui controle la position de la tete de lecture dans le clip video. 

Dans la fonction stopperDeplacement, nous arretons le deplacement du curseur (stop- 
Drag) ainsi que le deplacement de la tete de lecture dans le clip video (removeEvent- 
Listener). 

Plus bas, la fonction appelee au deplacement du curseur (jouerVideo) calcule la position 
de la tete de lecture, dans le clip video_mc : 

// jouer la video 

function jouerVideo (evt: Event) { 

pourcentage=Math . ceil ( ( consolejnc . curseurjnc . x- initMouseX )/( stage . stageWidth / 1 00 ) ) ; 

positionTeteDeLecture=Math . ceil ( pou rcentage* ( videojnc . totalFrames / 1 00 ) ) - 1 0 ; 

video_mc.gotoAndStop(positionTeteDeLecture) ; 

} 

Dans la fonction jouerVideo, la valeur pourcentage ramene d'abord sous la forme d'un 
pourcentage, la position courante du curseur. Mais, au prealable, nous prenons soin de 
retrancher la valeur vehiculee par la variable initMouseX, avant la division. Cela nous per- 
met d'initialiser le pourcentage a la valeur zero, et non a la valeur exacte de positionnement 
du curseur, qui n'est pas place a zero au demarrage de 1' application, mais a 10 pixels dans 
notre exemple. 

La deuxieme ligne du bloc d'instruction reprend cette valeur et la multiplie par un coeffi- 
cient. Ce coefficient transpose le pourcentage, obtenu au-dessus, a l'echelle de la duree de 
la video. Pour definir ce coefficient, nous prenons le nombre d'images contenues dans le 
clip video (totalFrames) et le divisons par 100. Le numero d'une image de scenario etant 
un chiffre entier, nous utilisons la classe Math. ceil () pour arrondir ce chiffre. Limage 
zero n'existe pas dans un scenario. Cette methode permet done aussi d'obtenir une valeur 
superieure a zero et d'atteindre une image qui existe, en toute circonstance. 

Une fois la valeur calculee, elle est transmise en parametre de la methode goToAndStop( ) 
qui controle la position de la tete de lecture dans le clip video. 

A retenir 

■ Pour realiser une interface ou I'utilisateur prend la main sur le flux video, sans sautillement ni rupture 
de flux, nous importons la video dans le Flash en respectant les contraintes de poids qui permettent 
de preserver raccessibilite du contenu. 

■ Pour que le defilement soit fluide, nous controlons le rafraichissement de la scene avec la methode 
updateAf terEvent ( ) . 

■ Pour que le flux d'image ne saute pas, le fichier video doit etre encode en FLV avec 1 00 % d'images- 
cles. 
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Arreter une video dans un SWF imbrique 

Un site bien concu conduit generalement a isoler les rubriques dans des SWF separes et a ne 
les importer que s'ils ont ete invoques par l'utilisateur. Dans ce contexte, si vous debutez en 
ActionScript 3, vous avez peut-etre eprouve des difficultes a vider un chargeur de son 
contenu, d'une part, mais surtout a interrompre 1' audio d'un fichier video ou d'une musique, que 
la rubrique chargee pouvait contenir. Lorsque vous supprimez de la liste d'affichage (remove- 
Child) un chargeur, vous ne supprimez pas son contenu comme nous le faisions en AS2 
- avec unloadMovie ( ) -, vous le "desaffichez". Pour contourner cette difficulte, quatre 
solutions sont desormais disponibles : 

• Vous pouvez interrompre le contenu d'un chargeur depuis le SWF qui a appele le contenu 
avec une serie destructions compatibles Flash 9. 

• Vous pouvez proceder a la meme manipulation avec une simple et unique instruction 
compatible Flash 10. 

• Vous pouvez decharger et interrompre le SWF appele depuis le SWF lui-meme, avec 
des instructions compatibles Flash 9. 

• Vous pouvez decharger et interrompre le SWF appele depuis le SWF lui-meme, avec 
quelques instructions compatibles Flash 10. 

Dans cette section, nous abordons les quatre solutions pour interrompre les contenus. Mais 
nous detaillons egalement quelques notions cheres aux anciens codeurs AS2, le ciblage des 
contenus imbriques et l'acces aux contenus de la scene parente ou racine. 

Dans cet exemple, nous disposons d'un premier SWF qui en appelle un autre, lequel joue 
une video. Nous avons place, a l'interieur de chaque document, un bouton Fermer qui per- 
met, chacun dans son contexte respectif et individuellement, de supprimer le contenu 
charge, et cela avec les deux syntaxes Flash 9 et Flash 10. 

Exemples > ch8_videolnteractive_9.fla et Exemples > ch8_videolnteractive_9b.fla 

Dans le document "ch8_videoInteractive_9.fla", sur la scene, un MovieClip nomme 
cible_mc sert de conteneur pour le SWF charge. Au-dessus, un contour blanc represente 
l'espace qu'occupe le contenu de ce SWF une fois celui-ci importe (voir Figure 8.19). 

Dans la fenetre de scenario, les symboles cible_mc et le bouton Fermer sont repartis distincte- 
ment vers les caiques (voir Figure 8.20). 

Dans le second document, nomme "ch8_videoInteractive_9b.fla", la scene afhche seulement 
un composant et un bouton de fermeture, localise (voir Figure 8.21). 

Dans la fenetre de scenario du document charge, le composant et le bouton fermer sont ega- 
lement repartis vers les caiques (voir Figure 8.22). 

La structure des deux documents permet de decharger et stopper les contenus aussi bien 
depuis le document racine que depuis le document appele. 
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Figure 8.19 

Apercu du SWF 
de depart. 





Figure 8.20 

Fenetre de 
scenario. 
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Figure 8.21 

Apercu du 
document SWF 
charge. 
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Figure 8.22 

Fenetre de 
scenario du docu- 
ment charge. 
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Arret et fermeture depuis le document racine 

Dans le caique actions du document racine ("ch8_videoInteractive_9.fla"), celui qui 
appelle 1' autre, nous lisons le code suivant : 

// chargement 

var chemin:URLRequest = new URLRequest ( "ch8_VideoInteractive_9b. swf " ) ; 
var chargeur: Loader = new Loader(); 
chargeur.load(chemin) ; 

chargeur. contentLoaderlnfo.addE vent List ener( Event .COMPLETE, aff icher) ; 

function afficher(Evt:Event){ 
cible_mc . addChild (chargeur) ; 

} 

// fermer depuis l'accueil 

f ermerDepuisAccueil_btn . addEvent Listener (MouseE vent .CLICK, f ermerSWF) ; 
function fermerSWF (evt:MouseEvent) { 

/* 

//Methode avant Flash 10 

MovieClip(chargeur. content) . ecranVideo. stop() ; 
chargeur . unload ( ) ; 

*/ 

chargeur. unloadAndStopO ; 

} 

Dans ce code, la premiere etape consiste a charger le second document SWF qui execute la 
video. Pour cela, nous definissions un nouveau chargeur, lequel execute raffichage du 
contenu une fois celui-ci charge (voir Chapitre 5 pour le detail de ces instructions) : 

// chargement 

var chemin:URLRequest = new URLRequest ( "ch8_VideoInteractive_9b. swf ") ; 

var chargeur: Loader = new Loader(); 
chargeur. load(chemin) ; 

chargeur. contentLoaderlnfo. addEvent List ener( Event .COMPLETE, aff icher) ; 

function afficher(Evt:Event){ 
cible_mc.addChild(chargeur) ; 

} 

Plus loin, nous ajoutons un ecouteur sur le bouton nomme f ermer_btn. Dans la fonc- 
tion appelee par 1' ecouteur, nous distinguons deux types d' instructions. La premiere, 
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laissee en commentaire pour ne pas doubler celle qui est restee active, est compatible 
Flash 9 : 

MovieClip(chargeur . content) . ecranVideo . stop( ) ; 
chargeur. unload() ; 

Si nous nous contentions de purger le chargeur, le contenu serait bien ote de 1' interface, 
mais le flux ne serait pas stoppe, un peu comme si le robinet continuait a deverser de l'eau 
alors que Ton ait retire le sceau. Le son et l'image continuent de se lire. Cette commande 
consiste done, dans un premier temps, a interrompre tout ce qui est execute. En l'occur- 
rence, la video. Puis, sur la deuxieme ligne, a purger le chargeur. 

Pour cibler plus specifiquement le contenu charge dans un SWF, nous devons d'abord faire 
reference au chargeur que nous avons utilise pour importer le contenu. Plus precisement, 
nous devons faire reference a ce qu'il contient, et non a l'enveloppe qu'il represente. Nous 
specifions done, en plus de reprendre son nom (chargeur), que nous ciblons son contenu 
(chargeur. content). 

Ensuite, la reference au contenu du chargeur est passee en parametre d'une methode de 
transtypage en MovieClip. Et la deuxieme ligne, une fois la video arretee, purge le chargeur 
de son contenu. 



Pourquoi transtyper un chargeur en MovieClip ? 

II faut comprendre que chaque document AS3 possede desormais une structure oil la scene princi- 
pal n'est plus un simple MovieClip (comme ce fut le cas en AS1 ou en AS2), mais bien un objet de 
type Sprite, qui contient la scene principale MovieClip. Une couche intermediate a done ete ajou- 
tee a la structure d'un document Flash. Si cette modification structurelle a permis d'apporter une plus 
grande stabilite et de deployer de nombreuses fonctionnalites dans Flash, elle ne permet plus de cibler 
directement un contenu charge dans un SWF imbrique. Chaque document est reellement independant. 
Le Sprite ne possede pas les memes proprietes de ciblage que MovieClip. Pour transgresser cette 
contrainte, il faut done transtyper le Sprite qui contient la scene MovieClip du document importe, en 
MovieClip. Ainsi, toute la chaine d'imbrication preserve une structure integralement composee de Movie- 
Clip imbriques, et autorise de nouveau le ciblage. Pour en savoir plus sur la structure native d'un docu- 
ment Flash en AS3 et sur le principe de la liste d'affichage, consultez la documentation Adobe a la page 
suivante : http://livedocs.adobe.eom/flash/9.0 fr/main/wwhelp/wwhimpl/common/html/ 
wwhelp.htm?context=LiveDocs Parts bak&f ile=00000 1 42.html. 



Cette premiere methode, compatible Flash 9, peut vite devenir astreignante si les contenus 
charges deviennent multiples. C'est la raison pour laquelle, a la demande des utilisateurs, 
une nouvelle instruction est apparue avec Flash 10 : unLoadAndStop ( ) . 

chargeur. unloadAndStop() ; 

Concernant le ciblage du contenu charge, le principe reste done le meme. Mais une seule 
instruction suffit desormais pour interrompre tous les contenus et purger le SWF. Voici la 
liste des actions desormais associees a cette nouvelle methode : 

• Les flux audio et video sont arretes. 
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• Les ecouteurs d'evenements sont supprimes de la scene. 

• Les ecouteurs d'evenements enterFrame, f rameConstructed, exitFrame, activate 
et deactivate sont supprimes. 

• Les timers (horloges) sont arretees. 

• Les occurrences Camera et Microphone sont retirees. 

• Les clips sont stoppes. 

Arret et fermeture depuis le contenu charge 

Une autre technique, pour fermer un contenu, consiste a placer les actions directement dans 
le SWF charge. 

Dans le caique actions du document appele ("ch8_videoInteractive_9b.fla"), contenant la 
video, nous lisons ce code-ci : 

// termer depuis le SWF chargee 

f ermer_btn . addE vent List ener (MouseE vent . CLICK, fermerSoiMeme) ; 
function fermerSoiMeme (evt:MouseEvent) { 

/* 

//Methode avant Flash 10 
ecranVideo.stop( ) ; 

MovieClip(root. parent. root) . chargeur . unload ( ) ; 

*/ 

MovieClip(root. parent. root) . chargeur. unloadAndStopO ; 

//MovieClip(this . stage. getChildAt (0) ) .chargeur. unloadAndStopO ; 
} 

Dans ce code, un ecouteur est attache a un bouton situe sur la scene principale, localement. 
Cet ecouteur appelle une fonction qui propose deux types destructions : celles compatibles 
Flash 9 et Flash 10. 

Les deux premieres instructions sont en commentaire, pour de nouveau eviter de doubler 
1' instruction active : 

ecranVideo.stop() ; 

MovieClip(root. parent. root) . chargeur . unload ( ) ; 

La premiere ligne interrompt d'abord le flux video contenu dans la scene courante, comme 
nous le ferions simplement a travers une action classique. 

La deuxieme reprend le principe de ciblage du contenu dans le chargeur, evoque precedem- 
ment. Mais ce chargeur ayant ete cree dans la scene du document parent, nous le ciblons en 
y faisant reference par transtypage. 

En parametre de la methode MovieClip ( ) , nous indiquons simplement le chemin qui nous 
permet d'acceder au contenu cible, avec root . parent . root. 
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Ciblage dans un document Flash AS3 

Avec la structure Sprite d'un document AS3, root, qui autrefois designait la racine globale de 
I'ensemble des documents Flash imbriques (d'equivalent _root en AS1 et en AS2), ne cible desor- 
mais plus que la scene courante. 

II est en revanche toujours possible de remonter d'un niveau en utilisant la propriete parent, de 
deux niveaux en utilisant parent . parent, et ainsi de suite. Mais pour ce faire, vous devez preci- 
ser de quel objet vous partez, en ajoutant a la position de depart et celle d'arrivee un root. Vous 
obtenez alors root . parent . parent . root, pour cibler la scene courante d'un conteneur de 
conteneur parent. 

En ActionScript 3, la racine globale, qui correspondait avant a _root, est desormais designee par la 
propriete stage de I'objet conteneur que constitue le document racine. Pour I'invoquer, nous ecri- 
vons a present this, stage. getChildAt (0). 

Voir aussi la note suivante pour un exemple de ciblage avec this . stage .getChildAt (0). 

Exemples de ciblage de contenus dans des SWF imbriques (AS2 et AS3) 

En ActionScript 2, pour cibler un contenu dans un autre SWF, nous procedions ainsi : 

■ Cibler un symbole intitule clipjnc dans un SWF charge, contenu dans ciblejnc : 
cible_mc . clipjnc . rotat ion=90 ; 

■ Cibler un symbole intitule clip_mc dans un SWF parent, contenu dans ciblejnc : 
jDarent. ciblejnc. clip jnc.rotation=90; 

■ Ou bien, si le SWF parent est le conteneur principal : joot.cible_mc.clip_mc.rotation=90; 

■ Pour cibler un contenu intitule clipjnc et place deux conteneurs en amont, nous inscrivions : 
_parent._parent.cible_mc.clip_mc.rotation=90; 

En ActionScript 3, pour cibler un contenu dans un autre SWF nous procedons desormais ainsi : 

■ Cibler un symbole intitule clipjnc dans un SWF charge, contenu dans ciblejnc. Le nom du 
conteneur n'apparait plus. Nous invoquons directement le chargeur : 

MovieClip(nomDuChargeur . content) . clipjnc . rotation=90; 

■ Cibler un symbole intitule clipjnc dans un SWF parent, contenu dans ciblejnc : 

MovieClip( root .parent . root) .ciblejnc. clipjnc . rotat ion=90; 

■ Ou bien, si le SWF parent est le conteneur principal (equivalent en AS3 de j~oot) : 

MovieClip(this . stage .getChildAt (0) ) . ciblejnc . clipjnc . rotation=90; 

■ Pour cibler un contenu intitule clipjnc et place deux conteneurs en amont, nous inscrivions : 

MovieClip( root . parent . parent . root) .ciblejnc . clipjnc . rotation=90; 

A defaut d'utiliser la methode getChildAt ( ), vous pouvez egalement cibler un objet en utilisant 
getChildByName( ). Mais vous devez alors connaitre le nom de I'objet pour le passer en parameter 
de cette methode. Ce qui donne, par exemple : 

getChildByName ( "clipjnc " ) ; 
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Dans notre exemple, la fonction propose aussi une instruction compatible Flash 10 : 

MovieClip ( root . parent . root) . chargeur . unloadAndStop ( ) ; 
//MovieClip(this . stage. getChildAt (0) ) . chargeur. unloadAndStop ( ) ; 

Comme enonce plus haut, nous ciblons ici le chargeur situe dans le SWF parent. Puis, nous 
reprenons, comme pour le lien place dans le SWF parent, la methode unloadAndStop ( ) . 

Une variante de la premiere ligne est ajoutee en commentaire. Elle propose une alternative 
a la syntaxe root . parent . root, pour cibler directement la scene du conteneur principale 
(avec this . stage .getChildAt (0)), que nous aurions autrefois appelee avec _root. 

En publiant les deux documents, le premier charge le second et execute directement la 
video. Lorsque vous cliquez sur le lien situe en haut et a droite de la video, comme sur le 
lien situe sous la video a droite, celle-ci est d'abord arretee, puis disparait (voir 
Figure 8.23). 



A retenir 

■ II est possible de cibler des objets dans des documents imbriques et, inversement, de se referer a des 
objets places dans un document racine, en ActionScript 3. Pour cela, nous transtypons les chargeurs 
avec la methode MovieClip ( ) et ciblons leur contenu avec la propriete content. 

■ Pour supprimer un document imbrique qui joue une video, il faut d'abord interrompre le flux, puis 
purger le chargeur qui a appele ce contenu. 

■ Une nouvelle methode, en ActionScript 3, permet d'interrompre les contenus charges et de purger 
le chargeur, simultanement : unLoadAndStop( ). 



Figure 8.23 

Apercu du 
document. 
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Synthese 

Dans ce chapitre, vous avez appris a controler l'interactivite sur la video en creant vous- 
meme vos propres commandes pour, entre autres, lire, stopper, accelerer et rembobiner la 
video et modifier le volume sonore avec progression. Vous avez appris a realiser un systeme 
de sous-titrage en utilisant un affichage de texte personnalise, a creer differents dispositifs 
de chapitrage. Vous avez appris a realiser des presentations video fluides y compris quand 
elles sont lues en arriere et a vitesse variable. Vous avez appris a gerer 1' integration de 
contenus videos dans des documents imbriques et a contourner la complexite de 1' Action- 
Script 3 pour arreter les contenus audio et video charges. D'une maniere plus generale, vous 
avez aussi appris a maitriser le ciblage de contenus dans une structure de site complexe. 
Vous etes a present en mesure de realiser des sites richmedia impliquant l'organisation de 
contenus videos et une couche importante d'interactivite. 
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Introduction 

La gestion de la 3D est possible nativement dans Flash depuis la version CS4. Mais elle 
reste toutefois limitee a l'animation d'objets 2D dans un espace 3D. Des lors que l'utili- 
sateur dispose d'un lecteur Flash recent (Flash 10), il peut l'executer. Les proprietes 3D 
des objets du scenario, couplees a des interpolations programmees en ActionScript (avec 
la classe TweenMax), ouvrent de nouvelles "perspectives" dans la conception de sites 
Internet. 

Dans ce chapitre, nous allons voir comment programmer des animations en 3D, dans Flash, 
de maniere simple et accessible. Pour cela, nous utilisons en premier exemple un livre avec 
des pages qui tournent - un rlipbook -, puis, nous analyserons des systemes de presentation 
de contenus avec differents types de galeries 3D, impliquant entre autres des images et de la 
video. 

A Tissue de ce chapitre, vous saurez creer des interfaces 3D conviviales, en toute simplicite. 
Les proprietes 3D disponibles nativement pour l'animation dans Flash sont les suivantes : 

• x positionne l'objet sur l'axe des abscisses. 

• y positionne l'objet sur l'axe des ordonnees. 

• z positionne l'objet sur l'axe Z. 

• rotationX effectue une rotation de l'objet sur l'axe des abscisses. 

• rotationY effectue une rotation de l'objet sur l'axe des ordonnees. 

• rotationZ effectue une rotation de l'objet sur l'axe Z. 

Ces proprietes permettent de deplacer et pivoter les objets dans l'espace de la meme 
maniere que nous le faisons avec d' autres proprietes, y compris a travers des animations 
programmees ou non. 

Dans Flash, l'axe X represente la ligne horizontale qui part de la gauche vers la droite. L'axe Y la ligne 
qui descend verticalement. L'axe Z, enfin, designe la ligne frontale qui part du premier plan (I'ecran) 
et se dirige vers I'infini en arriere-plan (voir Figure 9.1). 

La rotation dans l'espace 3D se determine par rapport aux axes X, Y et Z. Une rotation en X fait pivo- 
ter un objet sur l'axe X tout en le maintenant dans sa direction a la maniere du balai d'une moisso- 
neuse (voir Figure 9.2). Une rotation en Y fait pivoter un objet autour de l'axe des ordonnees (axe 
vertical) a la maniere des lames d'un mixeur. Une rotation en Z applique un mouvement circulaire sur 
l'axe frontal des profondeurs, a la maniere des ailes d'un moulin a vent que nous observerions de 
face. 





Figure 9.2 

Definition des 
rotations X, Y et Z 
dans un 
espace 3D. 




rotation X 



rotation Y 



rotation Z 



Animer un livre 3D en ActionScript 

Dans cette section, nous allons aborder la conception d'un livre avec des pages qui tournent. 
Pour cela, nous utilisons la classe TweenMax, compatible avec les proprietes 3D de Flash 
ainsi que des proprietes de rotation dans l'espace (voir Figure 9.3). 



Figure 9.3 

Apercu apres 
publication. 
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En publiant le document, une animation fait entrer le livre au centre de l'ecran. En cliquant 
sur la fleche situee a droite du livre ou sur le livre lui-meme, la page tourne sur un axe 3D et 
laisse apparaitre la page suivante, ceci pour toutes les pages. Une fois le livre termine, une 
animation 3D le retire de l'ecran en le faisant pivoter dans l'espace 3D, sur lui-meme. 



Exemples > ch9_3DNative_I .fla 



Dans le document "ch9-3DNative-l.fla", sur la scene principale, au-dessus du caique 
f ond_mc, apparait un symbole de type MovieClip nomme livre_mc (voir Figures 9.4 
et 9.5). Le livre est place hors champ. 



Figure 9.4 

Apercu de la 
scene principale. 




Figure 9.5 

Apercu du scena- 
rio de la scene 
principale. 
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Le MovieClip livre_mc contient quatre symboles. Le premier represente la page de gauche 
(livre ouvert), c'est-a-dire, la page de couverture. Un autre clip represente la page de droite 
et comporte l'ensemble des ecrans de toutes les pages du livre. En effet, une seule page est 
animee et elle laisse done derriere elle un vide a chaque action. Une page Arriere sert de 
fond pendant les transitions. Enfin, un bouton en forme de fleche active le mecanisme des 
pages qui tournent (voir Figure 9.6). 
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Figure 9.6 

Apercu du scena- 
rio du symbole 
pageDroite_mc. 
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Le symbole pageDroite, ayant pour nom a" occurrence pageDroite_mc, contient une serie 
d'ecrans qui constituent les differentes pages du livre. Chaque ecran est distribue dans le 
scenario sous la forme d'images-cles, placees les unes a la suite des autres. La derniere 
image est vide. Elle represente le verso de la page tournee (voir Figure 9.7). 



Figure 9.7 

Apercu du scena- 
rio du symbole 
pageDroite_mc. 
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Sur la scene principale, au sommet de tous les caiques, figure le caique Actions (voir 
Figure 9.5). Dans la fenetre Actions, nous pouvons lire le code suivant : 

import gs.TweenMax; 
import gs. easing.*; 
import gs. events.*; 

var tweenPage:TweenMax; 

var nombreDePages:Number=livre_mc.pageDroite_mc.totalFrames-1 ; 
var i:Number=1 ; 

livre_mc . pageDroitejnc . stop ( ) ; 

// animation d ' introduction 

var tween3D:TweenMax=TweenMax.to(livre_mc,4, {x:330, rotationZ: -15, delay:0, 
» ease:Strong.easeInOut}) ; 

TweenMax .from ( livrejnc . pageGauchejnc , 2 , { rot at ion Y : - 1 80 , delay : 2 , 
«» ease:Strong.easeInOut}) ; 

TweenMax. f rom(livre_mc.flecheDroite_btn,2, { alpha :0, delay :4, 
» ease:Strong.easeInOut}) ; 

// cliquer pour tourner les pages 

livre_mc . addE vent List ener (MouseEvent . M0USE_D0WN, pageSuivante) ; 

function pageSuivante (evt:MouseEvent) { 
i++; 

// page de garde 
if (i<=1) { 

livrejnc . swapChildren ( livre_mc . pageGauchejnc , livrejnc . pageDroitejnc ) ; 

} 

// page de droite 

if (i<=nombreDePages) { 

tween3D=TweenMax . to ( livrejnc . pageDroitejnc , 1 , { rotationY : 1 80 , ease : St rong . easeOut } ) ; 



La 3D native 



245 



tween3D. addE vent Listener (TweenE vent .COMPLETE, tween3DFini) ; 
} else { 

//animation de fermeture 

livre_mc . pageArrierejnc . visible=f alse ; 

TweenMax . to(livre_mc . pageDroitejnc, 1 , {rotationY: 1 80, ease : Strong . easeOut}) ; 
TweenMax.to(livre_mc,4,{rotationZ:360, x:1000, z:-500, alpha:0, 
*• rotationY: 360, delay:1, ease:Strong.easeInOut}) ; 
livre_mc .f lecheDroite_btn . visible=f alse; 

tweenPage . addEvent Listener (TweenEvent .COMPLETE, tweenPageFini) ; 

} 

} 

function tween3DFini (evt :TweenEvent) { 
livre_mc . pageDroite_mc . gotoAndStop ( i ) ; 

TweenMax . f rom(livre_mc . pageDroitejnc , 1 , {alpha : 0, ease : Strong . easeOut} ) ; 
livre_mc . pageDroitejnc . rotationY=0; 

} 

function tweenPageFini (evt :TweenEvent) { 

removeEventListener( Event . ENTER J^RAME, masquerVersoPage) ; 

} 

// masquer le verso des pages qui tournent 

addEvent Listener (Event . ENTER j^RAME, masquerVersoPage) ; 
function masquerVersoPage (evt:Event) { 

if (livrejnc. pageDroitejnc. rotationY>90) { 
livrejnc . pageDroite_mc . gotoAndStop (6) ; 

} 

} 

Ce code est structure en quatre parties : 1' initialisation, l'animation d' introduction, les 
actions des pages qui tournent et la gestion du verso des pages tournees. 

La premiere partie du code importe les classes utilisees pour les transitions TweenMax : 

import gs. TweenMax; 
import gs. easing.*; 
import gs. events.*; 

A la suite, nous definissons quelques variables. La premiere identifie une interpolation 
TweenMax en vue de lui faire succeder d'autres actions : 

var tweenPage:TweenMax; 

La deuxieme compte le nombre de pages du livre : 

var nombreDePages:Number=livrejnc. pageDroitejnc. totalFrames-1 ; 

La methode totalFrames, abordee au Chapitre 8, permet ici de compter le nombre total 
d'images dans le scenario du symbole pageDroitejnc. Nous lui retranchons cependant 1 
afin de ne pas comptabiliser la page vide utilisee pour le verso. 

Nous definissons ensuite une variable i, utilisee pour 1' incrementation des pages, a chaque 
fois qu'une page est tournee. La valeur demarre a 1, car la premiere image du scenario de 
pageDroitejnc demarre aussi a 1 et, bien que masquee, est deja active. 

var i:Number=1 ; 
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Enfin, nous stoppons le defilement automatique de la tete de lecture dans le symbole 
pageDroite_mc. A defaut, nous les verrions toutes defiler jusqu'a la premiere interaction. 
Ceci equivaut a placer un stop directement en tete de la premiere image de ce me me clip : 

livre_mc . pageDroitejnc . stop ( ) ; 

Les premieres instructions consistent a realiser une animation d' introduction pour placer le 
livre en position de lecture, pret a etre ouvert. Nous deployons pour cela, dans cette 
deuxieme partie, quelques transitions de type TweenMax : 

// animation d ' introduction 

var tween3D:TweenMax=TweenMax.to(livre_mc,4,{x:330, rotationZ: -15, delay :0, 

=» ease:Strong.easeInOut}) ; 

TweenMax. from(livre_mc.pageGauche_mc, 2, {rotationY: -180, delay: 2, 
» ease:Strong.easeInOut}) ; 

TweenMax. f rom(livre_mc.f lecheDroite_btn,2, { alpha :0, delay :4, 
■» ease:Strong.easeInOut}) ; 

Dans ces interpolations, nous placons, en parametre, des proprietes 3D (rotationZ, rota- 
tionY). Nous utilisons les proprietes 3D de la meme maniere que les autres proprietes (x, 
alpha, scaleX, etc.). 

La premiere occurrence d'animation est typee. C'est pour nous permettre de disposer d'un 
nom d'objet, par la suite, sur lequel nous pourrons placer un ecouteur et enchainer avec 
d'autres actions (voir Chapitre 2). 

Dans notre animation, le livre vient se positionner dans le champ en s'inclinant legerement 
a -15° (rotationZ : 1 5). Cette transition dure quatre secondes et demarre a l'instant 0. 

Puis, des la deuxieme seconde, dans la deuxieme interpolation, la page de gauche du livre 
pivote sur son axe Y (rotationY : -1 80) et revele la page de droite placee a l'arriere-plan. 
Cette transition dure deux secondes et se termine en meme temps que la premiere. Les effets 
des deux animations se superposent dans le temps. Enfin, une transition fait apparaitre la 
fleche droite et signale l'interactivite. Les enchainements de ces transitions ont ete geres 
avec la propriete delay, sans recours aux ecouteurs. 

[.'accumulation de filtres sur des objets animes en 3D, avec des textures degradees et des animations 
en alpha, sollicite beaucoup les ressources graphiques. Si des sautillements apparaissent, pensez a 
reduire ces effets. 

Dans la troisieme partie, un ecouteur est attache au livre. II appelle la fonction pageSui- 
vante : 

// cliquer pour tourner les pages 

livre_mc . addE vent Listener (MouseEvent . M0USE_D0WN, pageSuivante) ; 

function pageSuivante (evt:MouseEvent) { 
// instructions des pages qui tournent. 
} 

Nous ciblons directement le livre, et non pas seulement la fleche contenue dans le livre, afin 
de permettre a l'utilisateur d'activer le changement de page meme en cliquant sur le livre. 
Puisque la fleche est contenue dans le symbole du livre, le script fonctionnera egalement en 
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cliquant sur la fleche. En proposant une action plus etendue, nous renforcons l'ergonomie 
du projet. 

A l'interieur du bloc d'instruction de la fonction, nous commencons par incrementer i : 
i++; 

Puis, nous verifions sa valeur. Si cette valeur est inferieure au nombre de pages a visiter, 
alors, nous intervertissons, dans la liste d'affichage, les index de position des symboles 
pageGauche et pageDroite : 

// page de garde 
if (i<=1) { 

livrejnc . swapChildren ( livre_mc . pageGauche mc , livre_mc . pageDroite_mc) ; 

} 

La methode swapChildern ( ) appelle en parametres les deux objets, separes par une vir- 
gule, a substituer dans la liste d'affichage (livrejnc . pageGauche_mc, 
livre_mc . pageDroite_mc). Le premier objet prend ainsi l'index du second. 

Nous procedons a l'interversion des objets car l'animation 3D se materialise sur le niveau 
de l'objet uniquement, et non sur l'ensemble de la scene. La scene n'est pas reellement pro- 
jetee en 3D. Seuls les objets le sont individuellement. Des proprietes generates existent pour 
la scene, mais les transformations des objets se font localement, a chaque niveau. Si bien 
que lorsque nous faisons pivoter un objet dans l'espace, si celui-ci est place sous un sym- 
bole, l'objet restera toujours en arriere-plan. Pour contourner ce probleme, nous replacons 
au premier plan (pageGauche), celui place a 1' arriere-plan (pageDroite). 

Une fois la valeur de i verifiee et l'index de la page de droite place au premier plan, nous 
deployons le mecanisme de rotation : 

// page de droite 
if (i<=nombreDePages) { 

tween3D=TweenMax . to (livrejnc . pageDroitejnc , 1 , {rotationY: 180, ease : Strong . easeOut} ) ; 
tween3D.addEventListener(TweenEvent .COMPLETE, tween3DFini) ; 
} 

Nous programmons la rotation de la page a l'aide de la propriete rotationY et d'une inter- 
polation de type TweenMax. La page tourne done bien sur sa verticale. Enfin, pour nous 
assurer que l'objet pivote sur sa tranche et non en son centre, nous avons place le centre du 
symbole a gauche, des sa creation (voir Figure 9.8). 

Un ecouteur est attache au nom d'objet de 1' interpolation TweenMax pour nous permettre de 
lancer une autre action, une fois l'animation terminee. Cette fonction, qui est executee 
quand la page est tournee, deplace la tete de lecture dans le symbole pageDroite et replace 
la page tournee a sa position initiale : 

function tween3DFini (evt :TweenEvent) { 
livre_mc . pageDroite_mc.gotoAndStop(i) ; 

TweenMax . f rom( livrejnc . pageDroite jnc , 1 , {alpha : 0, ease : Strong . easeOut} ) ; 
livrejnc . pageDroitejnc. rotationY=0; 

} 
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Nous avons egalement ajoute une interpolation qui affiche la page avec un fondu de type 
alpha, allant de 0 a 1 (avec from) : 

TweenMax.from(livre_mc.pageDroite_mc,1 , {alpha :0, ease: St rong . easeOut} ) ; 

Nous devons comprendre que le fait de toumer la page va necessairement produire un vide 
a 1' emplacement oil cette page figurait avant de pivoter. Pour combler ce trou, nous placons, 
a 1' arriere-plan, le symbole pageArriere_mc. Ann que la nouvelle page contenant l'image 
n'apparaisse pas brutalement, nous utilisons un fondu en alpha. 

II est possible d'afficher plus tot le contenu des pages en multipliant les symboles page- 
Droite dans le livre, d'une part, et en multipliant d'autant les instructions gotoAndStop 
dans le programme. 

Si la condition pour realiser la rotation de la page n'est pas verifiee (if ( i<=nombreDePages ) ), 
ou si le nombre de pages visitees a atteint la limite autorisee, alors else, une autre condition, 
est executee : 

else { 

//animation de fermeture 

livrejnc . pageArriere_mc . visible=f alse ; 

TweenMax.to(livre_mc.pageDroite_mc,1 ,{ rotat ionY: 180, ease: St rong. easeOut}) ; 
TweenMax.to(livre_mc,4,{rotationZ:360, x:1000, z:-500, alpha:0, 

rotationY:360, delay:1, ease:Strong.easeInOut}) ; 
livre_mc .f lecheDroite_btn . visible=f alse; 

tweenPage . addEvent Listener (TweenEvent .COMPLETE, tweenPageFini) ; 

} 
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Lorsque les images de la page de droite sont toutes visitees, la page arriere est d'abord mas- 
quee (visible=f alse) car il ne reste plus de page a tourner. La scene devient visible a 
1' arriere -plan du livre. 

Une fois le livre referme, deux transitions sont executees. La premiere fait pivoter la der- 
niere page. La seconde fait s'envoler le livre, mais avec un delai d'une seconde. Ceci permet 
au livre de se refermer avant de le voir s'envoler. 

Les mouvements du livre sont composes d'une rotation sur les axes Z (rotationZ:360) et 
Y (rotationY:360), puis d'un deplacement en X et Z. La valeur utilisee pour le deplace- 
ment du livre, en Z, est negative (z : -500). Cela signifie que l'objet quitte la scene tout en se 
rapprochant de l'ecran. 

Puis, nous masquons le bouton fleche pour eviter que l'utilisateur ne relance Taction. Nous 
signalons aussi la fin du programme. 

Enfin, pour d'optimiser les ressources de l'utilisateur, nous invoquons une fonction qui 
interrompt, a la fin de la transition, le gestionnaire ENTER_FRAME, desormais inutile 
(tweenPageFini). 

Dans les quatrieme et derniere parties, pour terminer, nous avons ajoute une fonction qui 
masque le verso des pages tournees : 

// masquer le verso des pages qui tournent 

addEvent Listener (Event .ENTER_FRAME, masque rVersoPage) ; 
function masquerVersoPage (evt:Event) { 

if (livre_mc.pageDroite_mc.rotationY>90) { 
livrejnc . pageDroite_mc.gotoAndStop(6) ; 

} 

} 

Nous specifions que, des que la page tournee atteint une rotation Y de 90°, c'est-a-dire des 
qu'elle apparait sur la tranche et que Ton ne percoit plus son contenu, au recto ni au verso, 
nous deplacons, avec un gestionnaire de type ENTER_FRAME, la tete de lecture de l'objet 
page a l'image 6, qui represente une page vide. Sans cette fonction, nous pourrions voir des 
deux cotes du symbole la meme image, mais inversee. En affichant ponctuellement, juste le 
temps de la rotation, l'image 6, nous donnons l'illusion de pages independantes les unes des 
autres. 

Pour completer, Taction appelee par le gestionnaire ENTER-FRAME fait reference a une nou- 
velle image du symbole pageDroite arm de compenser le fait que le moteur 3D affiche les 
contenus sur les deux faces simultanement. Lorsque la page bascule a 90°, il nous suffit 
done de modifier l'image affichee dans ce clip pour donner l'illusion que le verso se distin- 
gue du recto. Ainsi, pour creer un livre recto-verso, vous pouvez aj outer dans le symbole 
pageDroite_mc autant de pages verso que voulues, puis les appeler depuis le gestionnaire 
ENTER_FRAME en fonction de i, a travers la meme methode gotoAndStop ( ) . Vous obtenez : 

livrejnc . pageDroitejnc . gotoAndStop ( i+nombreDePages ) ; 

Pensez dans ce cas a adapter aussi le calcul de la variable nombreDePages, en fonction du 
nombre de pages verso. Par exemple : 

Var nombreDePages : int = (livre_mc.pageDroite_mc.totalFrames-1 ) / 2 



LE CAMPUS 



250 



ActionScript 3 ET motion design 



Realiser un livre interactif avec InDesign. Des systemes tres realistes de livres interactifs prepro- 
grammes (composants pageFlip) existent sur le Web et sont facilement accessibles. Dans la suite 
Adobe, par exemple, InDesign CS4 integre cette solution. Vous pouvez exporter tout type de mise en 
pages en livre Flash interactif au format SWF II ne reste plus, ensuite, qu'a lier le document a votre site 
avec un chargeur programme en ActionScript, comme nous I'avons vu precedemment dans le chapi- 
tre sur les galeries d'images. Pour exporter une mise en pages sous la forme d'un livre realiste au for- 
mat SWF, depuis InDesign, faites Fichier > Exporter. Dans les options d'exportation, choisissez SWF 
Pour aller plus loin dans la gestion de documents mis en pages, reportez-vous au Chapitre 1 5, section 
"Gerer le PDF". 



Lisser les images pour la 3D. L'affichage 3D peut generer un crenelage sur les images lorsqu'elles 
sont projetees dans un espace 3D ou simplement inclinees. Pour lisser les images, depuis la fenetre 
de Bibliotheque, sur chaque image, faites clic-droit > Proprietes. Puis, dans la fenetre de dialogue, 
activez I'option Autoriser le lissage. Vous pouvez proceder a la meme action en programmation. 
Reportez-vous a la section "Lissage des images bitmap", au Chapitre 1 1 , pour connaitre les solutions 
de lissage en programmation. 



3D avec la classe Tween 

Les proprietes 3D natives de Flash peuvent etre gerees avec la classe Tween. Pour un objet clipjnc 
anime, par exemple, avec les proprietes z et rotationX, vous obtenez ceci : 

import fl. transitions. Tween; 
import fl. transitions. easing.*; 
var monTween: Tween; 

monTween = new Tween (clipjnc, "z", Elastic. easelnOut, 0, 500, 3, true); 
var monTweenRx : Tween ; 

monTweenRx = new Tween (clipjnc, "rotationX", Elastic. easelnOut, 0, 500, 3, true); 
3D avec la classe Caurina 

Les proprietes 3D natives de Flash peuvent etre gerees avec la classe Caurina (disponible sur 

). Pour un objet clipjnc anime avec, par exem- 
ple, les proprietes z et rotationX, vous obtenez ceci : 

import caurina. transitions .Tweener; 

Tweener.addTween(clipjnc, {x:300, y:300, z:330, rotationX:90, rotationY:0, 
rotationZ:0, time:5, transition: "easeinoutexpo"}) ; 

3D avec la classe TweenMax 

Les proprietes 3D natives de Flash peuvent etre gerees avec la classe TweenMax. Pour un objet 
clipjnc anime avec, par exemple, les proprietes z et rotationX, vous obtenez ceci : 

import gs. TweenMax; 
import gs. easing.*; 

TweenMax. to (clipjnc, 2, {rotationX:90,rotationY:90,z:500,delay:1 , 
ease: Bounce. easeOut}) ; 
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A retenir 

■ Flash autorise la gestion de la 3D y compris a travers les interpolations des classes TweenMax, 
Caurina et Tween. II suffit d'y introduire les proprietes 3D x, y, z, rotationX, rotationY et 
rotationZ. 

■ Pour animer un objet en 3D, celui-ci doit etre un MovieClip. 

■ La gestion de la 3D dans Flash est localises sur chaque objet. II faut done modifier I'ordre d'apparition 
des objets dans la liste d'affichage lorsque leurs mouvements se croisent. 

■ La position du centre de chaque symbole anime en 3D est determinant pour la definition des mou- 
vements dans I'espace. 



Carrousel d'images 3D 

Un carrousel d'images 3D est une suite d'images que Ton peut faire deriler dans un 
espace 3D. Les images qui passent au centre sont frontales. Celles qui restent en retrait de la 
zone centrale se repositionnent dans I'espace 3D par une transition animee. Les carrousels 
d'images peuvent etre lineaires, circulaires ou epouser d'autres formes. L'exemple le plus 
illustre de ce type de presentation est le systeme de navigation intitule CoverFlow et deve- 
loppe par Apple. On le retrouve principalement sur le systeme Mac OS X, dans 1'iPhone, 
iTunes et de nombreux services associes a la marque Apple (voir Figure 9.9). 



Figure 9.9 

Apple CoverFlow. 




Dans cette section, nous allons voir comment faire defiler des images sur une bande hori- 
zontale. Mais nous presentons surtout comment definir un repositionnement 3D automati- 
que, en fonction de la position de chaque image sur l'axe des abscisses X. 

Pour cet exemple, nous proposons deux documents codes differemment, selon que vous 
preferez un codage simple a partir d'objets places manuellement dans le scenario ou un 
codage plus adapte a un interfacage dynamique (pour lier la presentation a un fichier XML, 
par exemple). 
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Version simplifiee 

Exemples > ch9_3DNative_2.fla 

En publiant le premier document, nomme "ch9_3DNative_2.fla", deux fleches donnent 
acces au defilement d'une suite d'images. A chaque clic, les images se repositionnement 
dynamiquement dans l'espace 3D en exercant une rotation sur l'axe Y (voir Figure 9.10). 



Figure 9.10 

Apercu 

du document 

public-. 




Dans la scene principale du document, une serie de MovieClip est repartie vers les caiques 
(voir Figure 9.11). 

Chaque symbole comporte une image doublee verticalement pour simuler un reflet. Le 
premier d'entre eux est situe precisement a 700 pixels a droite. Dans le code, nous utili- 
sons un pas d' incrementation de 300 pixels pour definir le repositionnement en X de ces 
images. La scene, elle, mesure 800 pixels et son centre est done situe a 400 pixels (voir 
Figure 9.12). 

En placant la premiere image a une valeur multiple du pas d' incrementation 
(400 pixels + 300 pixels), nous permettons a l'ensemble des images d'apparaitre plus tard, 
au centre de la scene, frontalement. 

Les images sont par ailleurs collees les unes aux autres, et pourraient meme se chevau- 
cher, car la rotation Y que nous ajoutons sur chaque image en programmation, reduit leur 
espace necessaire en largeur. De ce fait, une marge due a l'inclinaison apparaitra lors de 
la publication. 
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Figure 9.1 1 

Apercu de la 
scene principale. 




Figure 9.12 

Calcul du posi- 
tionnement des 
images. 



Origine x = 0 



300 px , _ 300 px ,^ 300 px ^ , 300 px 



Scene (800 px) 




700 px 



Les fleches gauche et droite situees de part et d' autre du document risquent d'etre cachees 
par le defilement des images. Pour contourner ce probleme, dans le scenario, un masque qui 
affecte toutes les images a ete applique et reduit la partie visible de la zone de defilement 
(voir Figure 9.13). 



Figure 9.13 

Apercu du scena- 
rio de la scene 
principale. 
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A l'interieur de chaque MovieClip d'image, le visuel est en fait contenu dans un second 
symbole. Ce dernier est duplique et place symetriquement en miroir bas de facon a obtenir 
un effet de reflet. Sur ce deuxieme symbole, nous avons applique un alpha a 40 %. 

Tous les symboles de la scene possedent chacun leur propre nom d'occurrence. Le code 
place dans la fenetre du caique Actions affiche ceci : 

// initialisation 

import gs.TweenMax; 
import gs. easing.*; 
import gs. events.*; 

// actions 

// fleche droite 

f lecheDroite_btn . addEventListener (MouseEvent . CLICK, def ilementDroite ) ; 
function def ilementDroite (evt: MouseEvent) { 

TweenMax.to(photo1_mc, 2, {x:photo1_mc.x-300, delay:0, ease : Back. easelnOut} ) ; 

TweenMax.to(photo2_mc, 2, {x:photo2_mc.x-300, delay:0, ease : Back. easelnOut} ) ; 

TweenMax.to(photo3_mc, 2, {x:photo3_mc.x-300, delay:0, ease : Back. easelnOut} ) ; 

TweenMax.to(photo4_mc, 2, {x:photo4_mc.x-300, delay:0, ease:Back. easelnOut}) ; 

TweenMax.to(photo5_mc, 2, {x:photo5_mc.x-300, delay:0, ease : Back. easelnOut} ) ; 

TweenMax.to(photo6_mc, 2, {x:photo6_mc.x-300, delay:0, ease : Back. easelnOut} ) ; 

TweenMax.to(photo7_mc, 2, {x:photo7_mc.x-300, delay:0, ease : Back. easelnOut} ) ; 

} 

// fleche gauche 

f lecheGauche_btn. addEventListener (MouseEvent .CLICK, def ilementGauche) ; 
function def ilementGauche (evt: MouseEvent) { 

TweenMax.to(photo1_mc, 2, {x:photo1_mc. x+300, delay :0, ease:Back. easelnOut}) ; 

TweenMax.to(photo2_mc, 2, {x:photo2_mc. x+300, delay :0, ease : Back. easelnOut} ) ; 

TweenMax.to(photo3_mc, 2, {x :photo3_mc. x+300, delay :0, ease:Back. easelnOut}) ; 

TweenMax.to(photo4_mc, 2, {x :photo4_mc. x+300, delay :0, ease:Back. easelnOut}) ; 

TweenMax.to(photo5_mc, 2, {x :photo5_mc. x+300, delay :0, ease:Back. easelnOut}) ; 

TweenMax.to(photo6_mc, 2, {x :photo6_mc. x+300, delay :0, ease:Back. easelnOut}) ; 

TweenMax.to(photo7_mc, 2, {x :photo7_mc. x+300, delay :0, ease:Back. easelnOut}) ; 

} 

// rotationY 

var largeurScene : Number=stage . stageWidth ; 
var moitieScene : Number=largeurScene/2 ; 

addEventListener ( Event . ENTER_FRAME , position3DAuto) ; 
function position3DAuto (evt: Event) { 

if (photo1_mc.x<largeurScene+photo1_mc. width && photo1_mc.x>- (photo1_mc. width) ) { 

photo1_mc. rotationY=Math.ceil( (photo1_mc.x-moitieScene)/4) ; 

} 

if (photo2_mc.x<largeurScene+photo2_mc. width && photo2_mc.x>- (photo2_mc. width ) ) { 

photo2_mc. rotationY=Math.ceil( (photo2_mc.x-moitieScene) I A) ; 

} 
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if (photo3_mc.x<largeurScene+photo3_mc. width && photo3_mc.x>-(photo3_mc. width)) { 

photo3_mc. rotationY=Math.ceil( (photo3_mc.x-moitieScene) /4) ; 

} 

if (photo4_mc.x<largeurScene+photo4_mc. width && photo4_mc.x>- (photo4_mc. width ) ) { 

photo4_mc. rotationY=Math.ceil( (photo4_mc.x-moitieScene)/4) ; 

} 

if (photo5_mc.x<largeurScene+photo5_mc. width && photo5_mc . x>- (photo5_mc. width ) ) { 

photo5_mc. rotationY=Math.ceil( (photo5_mc.x-moitieScene) /4) ; 

} 

if (photo6_mc.x<largeurScene+photo6_mc. width && photo6_mc.x>- (photo6_mc. width ) ) { 

photo6_mc. rotationY=Math.ceil( (photo6_mc.x-moitieScene)/4) ; 

} 

if (photo7_mc.x<largeurScene+photo7_mc. width && photo7_mc.x>- (photo7_mc. width ) ) { 

photo7_mc. rotationY=Math.ceil( (photo7_mc.x-moitieScene) I A) ; 

} 

} 

Ce code, concu pour une gestion simple des contenus a partir d'objets places directement 
dans le scenario, est structure en trois parties. La premiere partie appelle les classes utilisees 
pour les transitions TweenMax. La deuxieme partie gere le defilement horizontal des vignet- 
tes. La troisieme partie assure la rotation dans l'espace 3D selon la position courante de 
chaque image dans la scene. 

Le deplacement des images en X, engage avec les rleches, utilise des interpolations de type 
TweenMax : 

// fleche droite 

f lecheDroite_btn . addEvent Listener (MouseEvent . CLICK, def ilementDroite) ; 
function def ilementDroite (evt :MouseEvent) { 

TweenMax. to (photo1_mc, 2, {x:photo1_mc.x-300, delay:0, ease : Back. easelnout} ) ; 

} 

Le principe est decline pour chaque image de la scene et sur les deux fleches. Nous inversons 
simplement les valeurs de positionnement de +300 a -300. 

Ensuite, nous organisons le systeme de rotation automatique avec un gestionnaire de type 
ENTER_FRAME, arm que l'evenement soit recalcule perpetuellement : 

// rotationY 

var largeurScene : Number=stage . stageWidth ; 
var moitieScene : Number=largeurScene/2 ; 

addEventListener ( Event . ENTER_FRAME , position3DAuto) ; 
function position3DAuto (evt: Event) { 

if (photo1_mc.x<largeurScene+photo1_mc. width && photo1_mc.x>-(photo1_mc. width) ) { 

photo1_mc. rotationY=Math.ceil( (photo1_mc.x-moitieScene) /4) ; 

} 

} 

D'abord, nous initialisons deux valeurs. La premiere enregistre la largeur de la scene 
(stage . stageWidth). La seconde enregistre la position du centre de la scene, en divisant la 
premiere par deux (largeurScene/2). Ces valeurs sont utilisees dans la fonction 
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position3DAuto. Dans le bloc d' instructions de la fonction, pour chaque image, une condi- 
tion est veririee : 

if (photo1_mc.x<largeurScene+photo1_mc. width && photo1_mc.x>- (photo1_mc. width) ) { 
photo1_mc. rotationY=Math.ceil( (photo1_mc.x-moitieScene) /4) ; 

} 

Si la position courante de l'image est inferieure a la largeur de la scene et sa largeur cumulee 
- done si l'image entre dans le champ par la droite- alors le programme calcule sa rotation en 
Y. Simultanement, une seconde condition est veririee. Elle se distingue de la premiere par les 
deux esperluettes (&&) : si, la position courante de l'image est egalement superieure a sa lar- 
geur negative, e'est-a-dire, des que l'image entre dans le champ par la gauche, alors, la 
meme instruction que pour la premiere condition est executee (voir Figure 9.14). 



Figure 9.14 

Mecanisme de 
rotation en Y. 




L' instruction designee est la suivante : 

photo1_mc.rotationY=Math.ceil( (photo1_mc.x-moitieScene) /4) ; 

Nous definissons la rotation Y de l'objet en fonction de sa position courante en X. Plus pre- 
cisement, nous reprenons la position en X de l'objet moins la demie largeur de la scene, de 
sorte que la rotation soit neutralisee au centre de la scene, et non a l'extremite gauche oil x 
vaut 0. Pour definir un angle de rotation entier, nous arrondissons la valeur grace a 1' utilisation 
de la methode Math . ceil ( ) . 

Ce principe est applique a chacune des images presentes dans la scene. 

Version dynamique 

Ann de vous permettre d'exploiter plus facilement le carrousel avec des contenus externali- 
ses, nous avons optimise la gestion de ce programme en utilisant une structure composee a 
partir d'une boucle for et une autre avec une structure for each... in. 

©Exemples > ch9_3DNative_2b.fla 
Exemples > ch9_3DNative_2c.fla 



Dans le premier document, nous retrouvons quasiment la meme structure que dans le fichier 
initial, a la difference que 1' ensemble des vignettes est desormais rassemble dans un conteneur 
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de type MovieClip que vous pourrez substituer eventuellement par un conteneur genere 
dynamiquement. 

Cette modification structurelle, en ajoutant un conteneur, permet d'appliquer dynamique- 
ment le meme comportement a 1' ensemble des elements qu'il contient. Dans le scenario de 
la scene principale, le symbole contenujnc rassemble tous les elements (voir Figure 9.15). 



Figure 9.15 

Apercu du 
scenario de la 
scene principale. 
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Dans la fenetre Actions, nous pouvons lire le code suivant 



// 

import gs.TweenMax 
import gs. easing.* 
import gs. events.* 



initialisation 



var positionPhotol :Number=(contenu_mc.getChildAt(0) ) .x; 
var pas Increment at ion : Number=300; 



II- 



actions 



// fleche droite 

f lecheDroite_btn . addEvent List ener (MouseE vent .CLICK, defilement Droite) ; 
function def ilementDroite (evt :MouseEvent) { 

for (var i:Number=0;i<contenu_mc.numChildren;i++) { 
TweenMax.to( 

(contenu_mc.getChildAt(i) ) , 2, 
{ 

x: (contenujnc. getChildAt(i) ) .x-paslncrementation, 
delay :0, 

ease : Back . easelnOut 

} 

); 



} 



} 



// fleche gauche 

f lecheGauche_btn . addEvent List ener (MouseE vent .CLICK, def ilementGauche) ; 
function def ilementGauche (evt :MouseEvent) { 

for (var j :Number=0; j<contenu_mc.numChildren; j++) { 
TweenMax.to( 

(contenujnc . getChildAt ( j ) ) , 2, 
{ 

x: (contenujnc . getChildAt ( j ) ) .x+paslncrementation, 
delay :0, 

ease : Back . easelnOut 

} 
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); 

} 

} 

// rotationY 

var largeurScene : Number=stage . stageWidth ; 
var moitieScene :Number=largeurScene/2; 

contenu_mc . addE vent List ene r ( Event . ENTER_FRAME , posit ion3DAuto) ; 
function position3DAuto (evt:Event) { 

for (var k:Number=0;k<contenu_mc.numChildren;k++) { 
if 

( (contenu_mc.getChildAt(k) ) .x<largeurScene+(contenu_mc.getChildAt(k) ) .width- 
•» positionPhotol && (contenujnc.getChildAt(k) ) .x>-largeurScene) { 

(contenu_mc . getChildAt (k) ) . rotationY=Math . ceil( ( (contenu_mc .getChildAt (k) ) . 
x-moitieScene-positionPhoto1 ) I A) ; 
} 

} 

} 

// ciblage dynamique de contenu 

contenu_mc . addE vent List ene r (MouseE vent .CLICK, act ionPhotos) ; 
function actionPhotos (evt:MouseEvent) { 
trace(evt. target. name) ; 

TweenMax . to(evt . target ,2, { rot at ionZ : evt .target . rotationZ+360, delay :0, 
ease : Back . easelnOut} ) ; 
} 

Dans ce programme, nous initialisons d'abord deux valeurs que nous utiliserons dans le 
script. La premiere definit la position actuelle du premier symbole image dans contenu_mc. 
La methode getChildAt (0) permet de selectionner 1' element qui apparait en premier dans 
la liste d'affichage de ce conteneur. Vous pouvez en verifier le nom en ajoutant la propriete 
name a une action trace : 

trace (contenujnc . getChildAt (0) . name) ; / /photo1_mc 

Dans les actions, le code est aere sur plusieurs lignes arm de mieux distinguer chacune des 
proprietes utilisees dans 1' interpolation TweenMax. Cela n'a pas d'incidence sur l'execution 
du programme. 

Nous remplacons ici la repetition des instructions par une boucle for qui ne conserve 
qu'une seule ligne d' instruction. II existe autant d'iterations que d'images. C'est la boucle 
qui, en fonction de ses parametres, va multiplier et adapter les lignes de commande pour 
chaque contenu : 

for (var i:Number=0;i<contenu_mc.numChildren;i++) { 

TweenMax. to ( 

(contenu_mc . getChildAt (i) ) , 2, {x: (contenu_mc.getChildAt(i) ) . 
x-paslncrementation , delay:0, ease:Back.easeInOut }); 

} 

La valeur qui permet d' adapter 1' instruction est vehiculee par i. Nous indiquons, au travers 
du constructeur for, d'initialiser i a 0. Puis, tant que cette valeur reste inferieure au nombre 
d'enfants (symboles ou objets) disponibles dans contenu_mc, nous incrementons cette 
valeur. Ainsi, la boucle repete F ensemble des instructions qu'elle contient, entre ses accolades, 
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autant de fois qu'il y aura d'autres images. A chaque iteration, la valeur de i est augmentee 
(i++) si bien que les instructions qui utilisent cette valeur comme parametre peuvent main- 
tenant atteindre tour a tour chaque objet. 

Dans 1' interpolation TweenMax, nous ciblons chaque objet individuellement a l'aide de la 
methode getChildAt() (avec (contenujnc .getChildAt (i) )), deja invoquee pour la 
variable, plus haut. Cependant, il n'est pas possible d'appliquer directement la propriete x a 
la methode getChildAt ( ). Des parentheses sont done ajoutees ici, pour contenir la pre- 
miere instruction qui cible d'abord 1' objet, avant, seulement, de pouvoir modifier une des 
proprietes de cet objet. Cette methode est declinee pour l'ensemble des actions du pro- 
gramme. 

En fin de code, une derniere action est ajoutee au conteneur principal. Elle permet de cibler 
individuellement chacun des elements de ce conteneur en usant de la propriete target et de 
lui appliquer une rotation sur l'axe Z : 

// ciblage dynamique de contenu 

contenu_mc.addEventListener(MouseEvent .CLICK, actionPhotos) ; 
function actionPhotos (evt:MouseEvent) { 
trace(evt. target. name) ; 

TweenMax . to(evt .target ,2, { rot at ionZ : evt .target . rotationZ+360, delay :0, 
ease:Back.easeInOut}) ; 

} 



H 



Pour en savoir plus sur le developpement dynamique d'interfaces, reportez-vous au manuel d'Anne 
Tasso [Apprendre a programmer en ActionScript 3, ed. Eyrolles). 

Une declinaison de ce document est proposee, avec la structure for each... in, dans le 
fichier "ch9_3DNative_2c.fla". Dans ce document, nous avons remplace la boucle for avec 
une boucle de type for each... in. Ce type de boucle possede la particularite de designer 
l'ensemble des objets d'un conteneur simultanement. Ce qui evite d'avoir a les cibler indi- 
viduellement. C'est done encore plus optimise. Cela donne : 

// fleche droite 

f lecheDroite_btn . addEventListener (MouseEvent . CLICK, def ilementDroite) ; 
function def ilementDroite (evt: MouseEvent) { 
for each (var mc:MovieClip in contenujnc) { 

TweenMax. to (mc, 2,{x:mc.x-pasIncrementation, delay:0, ease: Back. easelnOut }); 

} 

} 

// fleche gauche 

f lecheGauche_btn . addEventListener (MouseEvent . CLICK, def ilementGauche) ; 
function def ilementGauche (evt: MouseEvent) { 
for each (var mc:MovieClip in contenujnc) { 

TweenMax. to(mc, 2,{x:mc.x+pasIncrementation, delay:0, ease: Back. easelnOut }); 

} 

} 



// rotationY 

var largeurScene : Number=stage . stageWidth ; 
var moitieScene:Number=largeurScene/2; 
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contenu_mc . addEventListener (Event . ENTER_FRAME , position3DAuto) ; 
function position3DAuto (evt: Event) { 

for each (var mc:MovieClip in contenu_mc){ 

if (mc.x<largeurScene+mc.width-positionPhoto1 && mc.x>-largeurScene) { 
mc.rotationY=Math.ceil( (mc.x-moitieScene-positionPhotol )/4) ; 

} 

} 

} 

A retenir 

■ Pour centrer dans la scene les effets ou les objets, nous integrons, dans le calcul des valeurs, la posi- 
tion du centre de la scene avec stage . stageWidth/2. 

■ Labouclefor each... in permet de cibler directement I'ensemble des objets d'un conteneur. 



Mur d'images 3D 

Un mur d'images est une mosaique sur laquelle on clique pour afficher une image en detail. 
Lorsque le pointeur survole l'ecran, le mur d'images oscille proportionnellement dans un 
sens ou dans 1' autre, verticalement et horizontalement. 

Dans cet exemple, nous utilisons des symboles places sur la scene dont nous controlons 
l'inclinaison en fonction de la position du pointeur a l'ecran. En balayant la scene, le mur 
d'image bouge. Nous ajoutons une interactivite sur les images a l'aide de la propriete tar- 
get, pour, par exemple, zoomer individuellement sur chaque image et materialiser un effet 
de "rollOver" avec un nitre dynamique (voir Figures 9.16 a 9.18). 



Figure 9.1 6 

Apercu du docu- 
ment a la publica- 
tion, pointeur sur 
le cote. 
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Apercu du 
document a la 
publication, 
image survolee. 



Figure 9.18 

Apercu du 
document a la 
publication, 
image cliquee et 
zoomee. 




Exemples > ch9_3DNative_3.fla 

Le document "ch9_3DNative_3.fla" affiche une mosaique nommee contenu_mc, a l'inte- 
rieur de laquelle sont repartis differents MovieClip. Chacun de ces MovieClip contient sa 
propre image et possede un nom d'occurrence (voir Figure 9.19). 
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Chaque symbole est deja reduit a 50 % de ses dimensions originates. Cela permet d'activer 
une fonction de zoom sans perdre sur la nettete de l'image. Le zoom leur affectera seule- 
ment leur echelle normale. 

Pour ameliorer egalement le rendu des images, dans un contexte en perpetuel mouvement, 
nous avons active, depuis la fenetre Bibliotheque, dans les proprietes de chaque image (clic- 
droit > Proprietes), 1' option Autoriser le lissage. 

Le scenario ne laisse apparaitre que le symbole contenujnc (voir Figure 9.20). 



Figure 9.20 

Apercu du 
scenario de la 
scene principale. 
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Dans la fenetre Actions, nous pouvons lire le code suivant : 

// initialisation 

import flash. filters. *; 

var haloln :GlowFilter=new GlowFilter(0xff ff ff , 1, 2, 2, 3, 255, false, false); 
var haloOut:GlowFilter=new GlowFilter(0xf fffff , 1, 0, 0, 3, 255, false, false); 



import gs.TweenMax 
import gs. easing.* 
import gs. events.* 



var demieScene: Number=stage . stageWidth/2; 
var hauteurScene : Number=stage . stageHeight/2; 
var Tween3D:TweenMax; 
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var nomlmageActive : String ; 

var positionInitX:Array=new ArrayO; 

var positionInitY:Array=new ArrayO; 

for (var i:Number=0; i<contenu_mc.numChildren; i++) { 
posit ion I nitX. push (contenujnc . getChildAt (i) . x) 
posit ion I nit Y. push (contenujnc . getChildAt (i) . y ) 

} 



II- 



actions 



// mouvement 3D 

contenu_mc.addEventListener(Event.ENTER_FRAME, murlmages) ; 
function murlmages (evt:Event) { 

contenu_mc. rotationY=(mouseX-demieScene) *0. 1 ; 

contenujnc . rotationX=(mouseY-hauteurScene) *-0 . 1 ; 

} 

// interactivity zoom 

contenujnc .addEvent Listener (MouseEvent .CLICK, zoom) ; 

function zoom (evt:MouseEvent) { 

Tween3D=TweenMax.to(contenu_mc.photo1_mc, 0.3, {z:0, x:positionInitX[0] , 
«y:positionInitY[0] , scaleX:0.5, scaleY:0.5, delay:0 ,ease:Strong.easeInOut}) 
TweenMax. to ( contenujnc. photo2_mc, 0.3, {z:0, x:positionInitX[1 ] , 

y:positionInitY[1 ] , scaleX:0.5, scaleY:0.5, delay:0 , ease: Strong. easelnOut}) 
TweenMax. to ( contenujnc. photo3_mc, 0.3, {z:0, x:positionInitX[2] , 
»» y:positionInitY[2] , scaleX:0.5, scaleY:0.5, delay:0 , ease: Strong. easelnOut}) 
TweenMax. to ( contenujnc. photo4_mc, 0.3, {z:0, x:positionInitX[3] , 
» y:positionInitY[3] , scaleX:0.5, scaleY:0.5, delay:0 , ease: Strong. easelnOut}) 
TweenMax. to (contenujnc.photo5jnc, 0.3, {z:0, x:positionInitX[4] , 

y:positionInitY[4] , scaleX:0.5, scaleY:0.5, delay:0 , ease: Strong. easelnOut}) 
TweenMax. to ( contenujnc. photo6_mc, 0.3, {z:0, x:positionInitX[5] , 
»» y:positionInitY[5] , scaleX:0.5, scaleY:0.5, delay:0 , ease: Strong. easelnOut}) 
TweenMax. to ( contenujnc. photo7_mc, 0.3, {z:0, x:positionInitX[6] , 
>=* y:positionInitY[6] , scaleX:0.5, scaleY:0.5, delay:0 , ease: Strong. easelnOut}) 
TweenMax. to (contenu_mc.photo8_mc, 0.3, {z:0, x:positionInitX[7] , 
*»y:positionInitY[7] , scaleX:0.5, scaleY:0.5, delay:0 , ease: Strong. easelnOut}) 
TweenMax. to (contenu_mc.photo9_mc, 0.3, {z:0, x:positionInitX[8] , 
w y:positionInitY[8] , scaleX:0.5, scaleY:0.5, delay:0 , ease: Strong. easelnOut}) 
// 

Tween3D.addEventListener(TweenEvent .COMPLETE, restaureFini) ; 
function restaureFini (yo:TweenEvent) { 

contenujnc . addChild (MovieClip(evt .target) ) ; 

} 

if (nomImageActive!=evt. target. name) { 
nomImageActive=evt . target . name 



// 

TweenMax. to(evt. target, 2, {z:-100, x: 
» delay:0.3, ease : Elastic . easeOut} ) ; 
} else { 

nomImageActive=" " ; 

} 



y:0, scaleX:1.2, scaleY:1.2, 



// rollovers 

contenujnc . addEvent Listener (MouseEvent . MOUSE jDVER, over) 
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function over (evt :MouseEvent) { 
evt .target .filters=[haloIn] ; 

} 

contenu_mc . addE vent List ener (MouseE vent . MOUSE_OUT, out ) ; 
function out (evt :MouseEvent) { 
evt. target. f ilters=[haloOut] ; 

} 

Le code est compose de quatre parties. L'initialisation, les actions de positionnement du 
mur dans l'espace 3D, la gestion de l'interactivite (zoom) sur les images et la gestion de 
l'effet rollOver. 

Avant de detailler chaque etape, nous devons comprendre le processus employe. En 
publiant le document, d'abord, l'ensemble nomme conteneur_mc oscille en fonction de la 
position du pointeur dans la scene. Puis, au passage de la souris sur les symboles qu'il contient, 
ceux-ci reagissent avec un filtre dynamique. En cliquant sur un symbole, celui-ci s'agrandit. 
En cliquant a nouveau dessus, il revient a sa position normale. Mais, si nous cliquons directe- 
ment sur un autre symbole, simultanement, la nouvelle image s'agrandit, tandis que la prece- 
dente revient en position initiale. 

Dans la premiere partie, nous commencons par importer les classes requises, dont filters, 
qui permettent, plus bas, de gerer l'effet rollOver (voir Chapitre 2). Nous commencons par 
instancier les deux effets, l'effet survole et l'effet inactif. Lorsque le pointeur survolera 
1' image, le premier sera active. Le second sera appele en sortant de 1' image : 

// initialisation 

import flash. filters.*; 

var haloIn:GlowFilter=new GlowFilter (0xf f ff f f , 1, 2, 2, 3, 255, false, false); 
var haloOut:GlowFilter=new GlowFilter(0xfff ff f , 1, 0, 0, 3, 255, false, false); 

Nous importons ensuite les classes des transitions TweenMax : 

import gs. TweenMax; 
import gs. easing.*; 
import gs. events.*; 

Puis, nous definissons quelques valeurs : 

var demieScene: Number=stage. stageWidth/2; 
var hauteurScene: Number=stage. stageHeight/2; 
var Tween3D:TweenMax; 
var nomImageActive:String; 

Les deux premieres valeurs servent a definir les rotations par rapport au centre de la scene, 
sur le meme principe que celui enonce dans la section precedente. Ensuite, nous typons une 
interpolation TweenMax arm de pouvoir enchainer des actions a Tissue d'une interpolation. 

Enfin, nous creons une variable chaine de caracteres ann de capturer, a chaque clic, le nom 
de l'image cliquee (nomlmageActive), de maniere a differencier son comportement, selon 
qu'elle ait deja ete zoomee ou non. 

Nous definissons ensuite deux tableaux qui enregistrent respectivement les positions de 
depart des images en X et Y. Nous utiliserons, plus loin dans le code, ces valeurs ann de res- 
taurer les images a leurs positions initiales : 

var positionInitX:Array=new ArrayO; 
var positionInitY:Array=new ArrayO; 
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for (var i:Number=0; ±<contenu_mc.numChildren; i++) { 
posit ion I nitX. push (contenu_mc.getChildAt(i) .x) 
posit ion In it Y. push (contenu_mc.getChildAt(i) .y) 

} 

La creation de chaque tableau est lancee avec la classe Array. Une boucle for ajoute, grace 
a la methode push ( ) , la position courante, en X et en Y, de chaque objet en fonction de son 
ordre d'affichage (contenu_mc.getChildAt(i) ). La boucle execute autant d'iteration 
qu'il y a d'enfant dans le symbole contenu_mc (contenu_mc . numChildren). 

Dans les actions, nous commencons par definir le mouvement global du conteneur d'images : 

// actions 

// mouvement 3D 

contenu_mc . addE vent Listener (Event .ENTER_FRAME, mur Images) ; 
function murlmages (evt:Event) { 

contenujnc . rotationY=(mouseX-demieScene) *0 . 1 ; 

contenujnc .rotationX=(mouseY-hauteurScene)*-0. 1 ; 

} 

Un ecouteur est attache au contenu et fait pivoter, en continu, l'objet sur l'axe Y (rota- 
tionY) et sur l'axe X (rotationX). La rotation sur l'axe Y est determined en fonction de la 
position du pointeur sur X. Celle de l'axe X, en fonction de la position du pointeur sur Y. 
Mais, comme vu precedemment, nous retranchons la demi-largeur et hauteur de la scene, 
afin de neutraliser les rotations lorsque le pointeur survole le milieu de l'ecran (quand la 
position vaut 0, la rotationX et rotationY vaut 0). 

D' autre part, la position du pointeur definie en X et en Y se mesure en centaines de pixels. 
La rotation, elle, se mesure en dizaines de degres. Nous reduisons done la valeur obtenue en 
la multipliant par 0 . 1 (equivaut a diviser par 1 0), ceci afin d'eviter un mouvement trop pro- 
nonce. 

Nous ajustons egalement la polarite du mouvement, avec un signe moins, selon que le sens 
que Ton veut affecter a l'inclinaison. Le signe moins inverse l'inclinaison par rapport a la 
position du pointeur. L' absence de signe conserve une inclinaison qui accompagne le mou- 
vement du pointeur. 

A la suite, nous creons l'interactivite relative a la fonction zoom, appliquee a chaque image : 
// interactivity zoom 

contenujnc. addEventListener(MouseEvent .CLICK, zoom) ; 
function zoom (evt :MouseEvent) { 

Tween3D=TweenMax.to(contenu_mc.photo1_mc, 0.3, {z:0, x:positionInitX[0] , 

»» y:positionInitY[0] , scaleX:0.5, scaleY:0.5, delay:0 ,ease:Strong.easeInOut}) ; 

TweenMax. to ( contenujnc. photo2_mc, 0.3, {z:0, x:positionInitX[1 ] , 

y:positionInitY[1 ] , scaleX:0.5, scaleY:0.5, delay:0 , ease: Strong. easelnOut} ) ; 
TweenMax. to ( contenu jnc . photo3jnc , 0.3, {z:0, x:positionInitX[2] , 

y:positionInitY[2] , scaleX:0.5, scaleY:0.5, delay:0 , ease: Strong. easelnOut} ) ; 
TweenMax. to ( contenujnc. photo4jnc, 0.3, {z:0, x:positionInitX[3] , 

y:positionInitY[3] , scaleX:0.5, scaleY:0.5, delay:0 , ease: Strong. easelnOut} ) ; 
TweenMax. to ( contenujnc. photo5_mc, 0.3, {z:0, x:positionInitX[4] , 

y:positionInitY[4] , scaleX:0.5, scaleY:0.5, delay:0 , ease: Strong. easelnOut} ) ; 
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TweenMax.to(contenu_mc.photo6_mc, 0.3, {z:0, x:positionInitX[5] , 

y:positionInitY[5] , scaleX:0.5, scaleY:0.5, delay:0 , ease: Strong. easelnOut} ) ; 

TweenMax.to(contenu_mc.photo7_mc, 0.3, {z:0, x:positionInitX[6] , 

y:positionInitY[6] , scaleX:0.5, scaleY:0.5, delay:0 , ease: Strong. easelnOut} ) ; 

TweenMax.to(contenu_mc.photo8_mc, 0.3, {z:0, x:positionInitX[7] , 

y:positionInitY[7] , scaleX:0.5, scaleY:0.5, delay:0 , ease: Strong. easelnOut} ) ; 

TweenMax.to(contenu_mc.photo9_mc, 0.3, {z:0, x:positionInitX[8] , 

•* y:positionInitY[8] , scaleX:0.5, scaleY:0.5, delay:0 , ease: Strong. easelnOut} ) ; 

// 

Tween3D. addEventListener(TweenEvent .COMPLETE, restaureFini) ; 
function restaureFini (yo:TweenEvent) { 

contenu_mc . addChild ( MovieClip ( evt . target ) ) ; 

} 

// autres actions 

} 

Dans un premier temps, nous appliquons un ecouteur qui detecte tout clic capture par 
l'objet contenu_mc. Le principe de propagation evenementielle utilise par AS3 permet aux 
objets contenus par un conteneur d'intercepter un evenement applique a celui-ci. Nous uti- 
lisons pour cela la propriete target et nous designons un ecouteur global pour 1' ensemble 
des symboles qu'il contient. 

En cliquant sur l'un des symboles, une interpolation TweenMax restaure d'abord la position 
initiale de ceux qui ont eventuellement deja ete zoomes. Cette interpolation est tres courte 
(0 . 3 secondes) arm de ne pas creer une attente trop longue lorsqu'aucune image n'a encore 
ete activee (au premier clic). Les proprietes animees sont l'index z, qui definit la position de 
1' image en profondeur. De valeur 0, elle designe une position normale. 

Nous restaurons aussi la position courante du symbole en X et Y, ainsi que son echelle scaleX 
et scaleY, a 50 % (0.5). 

L' interpolation creee pour le premier symbole est declinee pour 1' ensemble des elements a 
animer, soit 9 fois. Pour chacun d'entre eux, nous modifions le nom de l'objet a manipuler 
et sa position en X et Y. Les valeurs utilisees sont celles stockees initialement dans les 
tableaux. Pour lire ces valeurs, nous reprenons le nom de chaque tableau en ajoutant deux 
crochets, avec, en parametre, la valeur correspondant au symbole cible (positionInitX[0] 
et positionInitY[0]). 

La premiere d'entre elles est identifiee avec un nom de variable tween3D. Cette instantia- 
tion nous permet d'ajouter une fonction une fois 1' interpolation de restauration achevee. 

La fonction restaureFini, qui est appelee, est placee dans la fonction zoom, car elle fait 
directement reference a l'objet clique avec target par le biais de la variable evt, utilisee en 
parametre de la fonction zoom. Si la fonction etait placee en dehors de zoom, l'objet ne 
serait plus identifie. Si nous avions employe le meme nom de variable en parametre de la 
fonction restaureFini, nous aurions aussi genere une erreur, car le lecteur n'aurait pas su a 
quelle classe il devait se referer, MouseEvent ou bien TweenEvent, pour recevoir les infor- 
mations. C'est la raison pour laquelle cette fonction emploie egalement un terme differencie 
du premier et sans valeur specifique (yo). 

La fonction restaureFini commence done par redistribuer au sommet de la liste d'affi- 
chage, l'objet clique. Cette action replace virtuellement l'objet sur le caique du dessus, dans 
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contenujnc, en faisant retomber la pile d'objets restant, un niveau en dessous, jusqu'a 
l'emplacement alors reste vide. Ainsi, l'image zoomee apparaitra au premier plan indepen- 
damment des autres, et non en chevauchant les autres images. 

La fonction se poursuit avec une structure conditionnelle : 

Tween3D. addEvent Listener (TweenE vent .COMPLETE, restaureFini) ; 
function restaureFini (yo:TweenEvent) { 

contenu_mc . addChild (MovieClip(evt .target) ) ; 

} 

if (nomImageActive!=evt . target. name) { 
nomImageActive=evt .target . name 

// 

TweenMax. to (evt. target, 2, {z:-100, x:0, y:0, scaleX:1.2, scaleY:1.2, 

> delay: 0.3, ease : Elastic . easeOut} ) ; 
} else { 

nomImageActive=" " ; 

} 

} 

Si le nom du symbole clique (evt . target . name) est different ( ! =) du nom enregistre dans 
la variable (evt . target . name) ou si l'image n'a pas deja ete cliquee, alors, une action est 
executee. 

Cette action commence par memoriser le nom de l'objet clique afin de pouvoir ridentifier 
comme actif lors du prochain clic. 

La deuxieme instruction est une interpolation. Elle cible l'objet clique (evt . target) et lui 
affecte un index de profondeur -100. L'objet est done rapproche de l'ecran. La position en 
X et Y est recentree afin que l'image agrandie ne sorte pas de l'ecran lorsqu'un symbole 
situe dans les coins est active. Puis, en plus du changement d'index z, l'image est agrandie 
a 120 %. Comme nous avons active le lissage des pixels, cette valeur reste tolerable et la 
deformation demeure encore imperceptible. 

Si la condition else n'est pas verifiee, nous purgeons le nom enregistre. Cela permet que 
lorsque l'utilisateur clique directement deux fois sur la meme image, de l'ouvrir a nouveau, 
sans devoir cliquer au prealable sur une autre image. Tant que le nom de l'image n'est pas 
modifie, l'image deja cliquee ne pourra pas en effet etre rejouee, sauf si nous modifions ce 
nom en le substituant, par exemple, avec un texte vide ("")• 

Le programme s'acheve avec la gestion des rollOver : 

// rollovers 

cont enu_mc. addEvent List ener (MouseE vent .M0USE_0VER, over) ; 
function over (evt :MouseEvent) { 
evt. target. filters=[haloIn] ; 

} 

cont enu_mc. addEvent List ener (MouseE vent .M0USE_0UT,out) ; 
function out (evt :MouseEvent) { 
evt. target. filters=[haloOut] ; 

} 
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En passant avec le pointeur sur les elements du conteneur, le nitre dynamique GlowFilter 
(f ilters=[haloIn] ) affiche un haloblanc autour de l'objet survole (evt . target). De la 
meme maniere, en sortant le pointeur de l'objet survole, le filtre est initialise avec le second 
objet GlowFilter (f ilters=[haloOut] ). 

A retenir 

■ Pour regrouper le stockage de valeurs, nous pouvons utiliser un tableau grace a la methode Array. 
Puis les redistribuer en I'invoquant par son nom et en parametre duquel nous specifions l'objet 
stocke a lire. 

■ Afin de placer un symbole au premier plan, dans un espace 3D, nous devons le repositionner au 
sommet de la liste d'affichage, avec, par exemple, la methode addChild ( ) . 

■ Lorsque plusieurs fonctions sont imbriquees, il est souhaitable de distinguer les identifiants passes 
en parametre, afin de distinguer les classes distributes par les differents ecouteurs. 



Galerie video 3D circulaire 

Une galerie en 3D avec de la video peut paraitre similaire, d'un point de vue structurel, a 
une galerie 3D d' images. Mais, pour obtenir une image propre et un document optimise, 
vous devez tenir compte de certaines distinctions : 

• L' image jouee en video doit etre dimensionnee en fonction de l'affichage final. 

• Lors des transitions, pour preserver la qualite de l'image, c'est le composant video qui 
doit etre redimensionne et non son conteneur. C'est done le conteneur qui evolue dans 
l'espace 3D et non la video. 

• Les videos doivent de preference etre arretees si aucune interaction de l'utilisateur n'est 
averee. Ceci afin d'optimiser les ressources machines de l'utilisateur deja sollicitees par 
la gestion de l'affichage 3D. 

Dans cet exemple, nous presentons une galerie d'ecrans video disposes de maniere cir- 
culaire. La galerie oscille selon la position du pointeur sur le meme mecanisme que 
1' exemple precedent. En survolant les ecrans, un effet de rollOver se produit, et, simulta- 
nement, la video survolee demarre. En cliquant sur la video, celle-ci est projetee fronta- 
lement avec un zoom spatial (echelle + index z) et l'oscillation est arretee. Lorsque 
l'utilisateur clique a nouveau sur la video, celle-ci revient a sa position initiale (voir 
Figures 9.21 et 9.22). 

Dans cette section, nous proposons deux approches pour la construction de cette interface. 
La premiere, accessible facilement, met en forme le dispositif a partir d' instructions simples 
et repetees. Une seconde approche exploite a 1' inverse une structure tabulaire pour vehiculer 
l'ensemble des proprietes des objets, afin de simplifier la gestion du code. Vous trouverez 
done, necessairement, la formule qui vous convient le mieux pour realiser vos propres sys- 
temes d'affichage en 3D. 
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Figure 9.21 

Apercu du 
document 
a la publication, 
video survolee. 




Figure 9.22 

Apercu du 

document 

a la publication, 

video projetee 

frontalement. 
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La galerie simple 

Dans cette version, nous initialisons les objets a mettre en forme a partir d' instructions repe- 
tees. Puis, nous ajoutons les comportements requis pour les animations et l'interactivite. 



Exemples > ch9_3DNative_4.fla 



Dans le document "ch9_3DNative_4.fla", sur la scene principale, le symbole contenujnc 
affiche six occurrences du meme MovieClip, mais de noms differents. Ce MovieClip 
contient un composant FLVPlayBack nomme ecranVideo (voir Figure 9.23). 

Figure 9.23 

Apercu de la 
scene principale. 




Dans la fenetre de scenario, au-dessus du caique fondjnc, on distingue le symbole 
contenujnc (voir Figure 9.24). 



Figure 9.24 

Apercu du 
scenario. 




La fenetre Actions affiche le code suivant : 

// initialisation 

import flash .filters .* ; 
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var haloln :GlowFilter=new GlowFilter(0xffffff , 1, 2, 2, 3, 255, false, false); 
var haloOut :GlowFilter=new GlowFilter(0xf f ffff , 0, 2, 2, 3, 255, false, false); 



import gs.TweenMax 
import gs. easing.* 
import gs. events.* 



var demieScene: Number=stage . stageWidth/2; 
var hauteurScene : Number=stage . stageHeight/2; 
var Tween3D:TweenMax; 
var nomlmageActive : String ; 



// configuration des ecrans video 

contenu_mc. v1_mc . ecranVideo . source=" video3D/3d-gKaster-C19.f4v" ; 
contenu_mc . v2_mc . ecranVideo . sou rce=" video3D/ 3d -gKaster- amusement .f 4v" ; 
contenu_mc . v3_mc . ecranVideo . source=" video3D/3d-gKaster-balistic . f 4v" ; 
contenu_mc . v4_mc . ecranVideo . sou rce=" video3D/3d-gKaster- demo reel. f4v" ; 
contenu_mc . v5_mc . ecranVideo . source=" video3D/3d-galaxieFull.f 4v" ; 
contenu_mc . v6_mc. ecranVideo . source=" video3D/3d-particules .f 4v" ; 
// 

contenu_mc . v1_mc . rotationY=-30; 
contenu_mc.v2_mc. rotationY=0; 
contenu_mc . v3_mc . rotationY=30; 
contenu_mc . v4_mc . rotationY=-30 ; 
contenu_mc.v5_mc. rotationY=0; 
contenu_mc . v6_mc . rotationY=30; 
// 

contenu_mc . v1_mc. z=-25; 
contenu_mc . v2_mc . z=40 ; 
contenu_mc.v3_mc.z=-25; 
contenu_mc . v4_mc . z=-25; 
contenu_mc . v5_mc . z=40 ; 
contenu_mc.v6_mc.z=-25; 
// 

for (var i:Number=0; i<contenu_mc.numChildren; i++) { 
MovieClip(contenu_mc.getChildAt(i) ) . ecranVideo. stop( ) ; 
MovieClip(contenu_mc.getChildAt (i) ) . ecranVideo. scaleMode=" exact Fit" 
MovieClip(contenu_mc.getChildAt (i) ) . ecranVideo. autoPlay=f alse; 

} 

// actions 

// mur d 1 image 3D 

contenu_mc. addE vent List ener( Event .ENTER_FRAME,mur Images) ; 
function murlmages (evt:Event) { 

contenu_mc. rot at ionY=(mouseX- demieScene) *0. 1 ; 

contenujnc . rot at ionX=(mouseY- hauteurScene) *-0 . 1 ; 

} 



// interactivite video 

contenu_mc . addE vent List ener (MouseE vent .CLICK, zoomVideo) ; 
function zoomVideo (evt :MouseEvent) { 

// 

contenu_mc . removeEvent Listener (Event . ENTER_FRAME, murlmages) ; 

TweenMax.to(contenu_mc, 3, {rotationX:0, rotationY:0, delay:0, 
* ease:Elastic.easeInOut}) ; 

// 
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Tween3D=TweenMax.to(contenu_mc.v1_mc, 0.3, {z:-25, x:-245, y:-72, 

rotationY: -30, delay:0, easerStrong.easelnOut}) ; 
TweenMax.to(contenu_mc. v2_mc, 0.3, {z:40, x:0, y:-72, delay:0, rotationY:0, 

ease:Strong.easeInOut}) ; 
TweenMax.to(contenu_mc.v3_mc, 0.3, {z:-25, x:245, y:-72, delay:0, 
* rotationY:30, ease:Strong.easeInOut}) ; 

TweenMax.to(contenu_mc.v4_mc, 0.3, {z:-25, x:-245, y:72, delay:0, 
*» rotationY: -30, ease:Strong.easeInOut}) ; 

TweenMax.to(contenu_mc.v5_mc, 0.3, {z:40, x:0, y:72, delay:0, rotationY:0, 

ease:Strong.easeInOut}) ; 
TweenMax.to(contenu_mc.v6_mc, 0.3, {z:-25, x:245, y:72, delay:0, 

rotationY:30, ease:Strong.easeInOut}) ; 

// 



*»y:-62, delay:0.3, ease:Elastic.easeOut}) 
TweenMax . to ( contenu_mc . v2_mc . ecranVideo , 2 
*»y:-62, delay:0.3, ease:Elastic.easeOut}) 
TweenMax . to (contenu_mc . v3_mc . ecranVideo , 2 
*»y:-62, delay:0.3, ease:Elastic.easeOut}) 
TweenMax . to (contenu_mc . v4_mc . ecranVideo , 2 
*»y:-62, delay:0.3, ease:Elastic.easeOut}) 
TweenMax . to(contenu_mc . v5_mc . ecranVideo, 2 
*»y:-62, delay:0.3, ease:Elastic.easeOut}) 
TweenMax . to(contenu_mc . v6_mc . ecranVideo, 2 
*»y:-62, delay:0.3, ease:Elastic.easeOut}) 
// 

Tween3D. addE vent Listener (TweenEvent .COMPLETE, restaureFini) ; 
function restaureFini (yo:TweenEvent) { 

contenu_mc . addChild (MovieClip(evt .target) ) ; 

} 

if (nomImageActive!=evt. target. name) { 
nomImageActive=evt . target . name 

// 

TweenMax. to(evt. target. ecranVideo, 2, {width:440, height:246, x:-220, 
»»y:-123, delay:0.3, ease:Elastic.easeOut}) ; 

TweenMax. to(evt. target, 2, {z:-100, x:0, y:0, rotationY:0, delay:0.3, 
ease : Elastic . easeOut} ) ; 
} else { 

nomImageActive=" " ; 

contenu_mc .addEvent Listener ( Event . ENTER_FRAME,mur Images) ; 

} 
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// rollovers 

contenu_mc . addE vent List ener (MouseEvent .MOUSE_OVER,over) ; 
function over (evt :MouseEvent) { 

evt. target. ecranVideo. play() ; 

evt .target . f ilters=[haloIn] ; 

} 

contenu_mc . addE vent List ener (MouseEvent . MOUSE_OUT, out ) ; 
function out (evt :MouseEvent) { 

evt .target .ecranVideo . stop( ) ; 

evt. target. filters=[haloOut] ; 

} 

Le programme se decompose en cinq parties. La premiere importe les classes requises dont 
les nitres et les transitions TweenMax. La deuxieme initialise les caracteristiques de chaque 
composant video et le positionnement de son conteneur dans l'espace 3D. La troisieme 
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active l'animation 3D du mur d'ecrans. La quatrieme lance l'interactivite avec les flux 
video. La cinquieme, enfin, ajoute l'effet rollOver sur chaque video et active la lecture de 
cette video. 

Dans la deuxieme partie, chaque composant est initialise selon les parametres suivants. 
L'ensemble de ces reglages est decline pour chacune des videos. Voici les caracteristiques 
pour l'une d'entre elles : 

// configuration des ecrans video 

contenu_mc . v1_mc . ecranVideo.source=" video3D/3d-gKaster-C19.f4v" ; 

// 

contenu_mc . v1_mc. rotationY=-30; 

// 

contenu_mc. v1_mc.z=-25; 

Analysons le code : 

• La propriete source designe l'URL du fichier video a lire. 

• Les proprietes rotationY et rotationZ positionnent non pas le composant mais son 
conteneur, le MovieClip, dans l'espace 3D. 

Plus loin, nous utilisons une boucle for arm de regrouper la gestion de l'ensemble des 
composants video distribues dans chaque MovieClip : 

for (var i:Number=0; i<contenu_mc.numChildren; i++) { 
MovieClip (contenu_mc.getChildAt(i) ) . ecranVideo.stop() ; 
MovieClip (contenujnc . getChildAt (i) ) . ecranVideo.scaleMode=" exact Fit " ; 
MovieClip (contenujnc . getChildAt (i) ) .ecranVideo.autoPlay=f alse; 

} 

Analysons le code : 

• La methode stop( ), une fois la source appelee, permet de preserver les ressources de 
l'utilisateur en empechant les videos de se lire automatiquement. 

• La propriete scaleMode indique si le composant doit etre redimensionne en fonction 
des dimensions reelles de la video. La valeur exactFit interdit le redimensionnement. 
Si la video est plus grande ou de proportions differentes du composant, elle epousera 
quand meme les dimensions du composant (voir Chapitre 8 pour le descriptif detaille de 
ces parametres). 

• Enfin, la propriete autoPlay passee sur false empeche la video de lire au demarrage 
(deux precautions valent mieux qu'une). 

Plus loin, les actions affichent le controle du mouvement du mur d'ecrans (voir section prece- 
dente). A la suite, apparaissent les controles d'interactivite avec les flux videos : 

// interactivite video 

cont enu_mc.addEvent List ener (MouseE vent .CLICK, zoomVideo) ; 
function zoomVideo (evt:MouseEvent) { 

// 

contenu_mc . removeE vent Listener ( Event . ENTER_FRAME, mur Images) ; 

TweenMax.to(contenu_mc, 3, {rotationX:0, rotationY:Q, delay:0, 
ease: Elastic. easel nOut}) ; 

} 
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Dans un premier temps, la fonction, appelee lorsque l'utilisateur active une video, neutralise 
l'oscillation du mur (removeEventListener). Ainsi, la video peut etre repositionnee fron- 
talement assez simplement et permettre une lecture confortable du contenu. Cette fonction 
sera reactivee lorsque toutes les videos seront restaurees a leur position initiale, plus loin 
dans le code. 

Une deuxieme instruction indique au symbole contenu_mc, dont nous venons d'interrom- 
pre le mouvement, de passer progressivement de sa position actuelle a une position frontale, 
pour laquelle tous les parametres modifies sont initialises a la valeurO (rotationX:0, 
rotationY:0). 

Ensuite, nous ajoutons les transitions pour chacun des composants et leurs conteneurs res- 
pectifs : 



// 



Tween3D=TweenMax . to (contenu_mc . v1_mc , 0.3, 

rotationY: -30, delay:0 ,ease:Strong.ease 
TweenMax.to(contenu_mc. v2_mc, 0.3, {z:40, 
»• ease:Strong.easeInOut}) ; 
TweenMax.to(contenu_mc. v3_mc, 0.3, {z:-25, 

rotationY:30, ease:Strong.easeInOut}) ; 
TweenMax.to(contenu_mc.v4_mc, 0.3, {z:-25, 

rotationY: -30, ease:Strong.easeInOut}) ; 
TweenMax.to(contenu_mc. v5_mc, 0.3, {z:40, 

ease:Strong.easeInOut}) ; 
TweenMax.to(contenu_mc.v6_mc, 0.3, {z:-25, 

rotationY:30, ease:Strong.easeInOut}) ; 

// 

TweenMax . to (contenu_mc . v1_mc . ecranVideo, 2 
»»y:-62, delay:0.3, ease : Elastic . easeOut} ) 
TweenMax . to(contenu_mc . v2_mc . ecranVideo, 2 
*»y:-62, delay:0.3, ease:Elastic.easeOut}) 
TweenMax . to (contenujnc . v3_mc . ecranVideo , 2 
»»y:-62, delay:0.3, ease:Elastic.easeOut}) 
TweenMax . to(contenu_mc . v4_mc . ecranVideo, 2 
*»y:-62, delay:0.3, ease:Elastic.easeOut}) 
TweenMax . to ( contenu_mc . v5_mc . ecranVideo , 2 
»»y:-62, delay:0.3, ease:Elastic.easeOut}) 
TweenMax . to (contenujnc . v6_mc . ecranVideo, 2 
*»y:-62, delay:0.3, ease:Elastic.easeOut}) 
// 



{z:-25, x:-245, y:-72, 

InOut}) ; 

x:0, y:-72, delay:0, rotationY:©, 

x:245, y:-72, delay:©, 

x:-245, y:72, delay:0, 
x:0, y:72, delay:0, rotationY:0, 

x:245, y:72, delay :0, 

, {width:220, height:123, x:-110, 

{width:220, height:123, x:-110, 

{width:220, height:123, x:-110, 

{width:220, height:123, x:-110, 

{width:220, height:123, x:-110, 

{width:220, height:123, x:-110, 



Vous relevez que nous animons distinctement le conteneur et le composant, avec differentes 
proprietes. 

Si nous avions effectivement anime uniquement le conteneur, en lui appliquant les proprie- 
tes de redimensionnement qui nous permettent d'agrandir l'image, celle-ci aurait ete consi- 
derablement deterioree, meme avec un lissage. Or, la video s'adapte par rapport aux 
dimensions du composant. II convient done de redimensionner le composant et non le 
conteneur. C'est la raison pour laquelle nous obtenons deux series d' interpolations, affec- 
tant chacune tous les conteneurs (contenujnc . v1_mc) - voir Figure 9.25 - puis tous les 
composants (contenujnc . v1_mc . ecranVideo). 
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Figure 9.25 

Calcul du posi- 
tionnement des 
ecrans, dans le 
conteneur 
contenu mc. 




Pour compenser neanmoins le decalage que peut provoquer le redimensionnement du com- 
posant independamment de son conteneur, nous rappelons les proprietes x et y de chaque 
objet pour recentrer l'ensemble a chaque modification d'echelle. Le changement de taille 
des elements conduit en effet a les decaler de leur position d'origine. II faut done aussi 
animer et restaurer les proprietes x et y de chacun d'entre eux. 

Pour permettre d'enchainer ces transitions avec d'autres actions, l'une d'entre elles possede 
un identifiant tween3D. 

Plus loin, nous ajoutons un ecouteur a l'objet tween3D, comme vu a la section precedente. 
Nous enchainons ici avec la condition suivante : 

// 

Tween3D. addEvent Listener (TweenEvent .COMPLETE, restaureFini) ; 
function restaureFini (yo:TweenEvent) { 

contenujne. addChild(MovieClip(evt . target) ) ; 

} 

if (nomImageActive!=evt. target. name) { 
nomImageActive=evt . target . name 

// 

TweenMax.to(evt. target. ecranVideo, 2, {width:440, height:246, x:-220, 

*»y:-123, delay:0.3, ease : Elastic . easeOut} ) ; 

TweenMax. to (evt. target, 2, {z:-100, x:0, y:0, rotationY:0, delay:0.3, 
ease : Elastic . easeOut} ) ; 
} else { 

nomImageActive=" " ; 

contenu_mc .addEventListener(Event . ENTER_FRAME,murImages) ; 

} 

} 

Nous specifions d'abord de placer le conteneur clique au premier plan pour eviter les chevau- 
chements lors du redimensionnement : 

contenu_mc.addChild(MovieClip(evt. target) ) ; 

Nous verifions ensuite la condition selon laquelle l'objet clique n'est pas deja zoome, selon 
le meme principe que celui utilise dans la section precedente. 

Les transitions affectent les deux objets (evt . target . ecranVideo et evt .target). 

Le composant video active est agrandi selon les dimensions exactes observees durant 
l'encodage. Nous avons releve les valeurs 440 x 246 pixels. Nous les appliquons done aux 
proprietes width et height du composant video. Le flux video, projete au premier plan, 
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s'adaptera ainsi en pleine resolution a la nouvelle dimension du composant. Le conteneur 
de la video activee (evt .target) est place, quant a lui, frontalement. Si la condition n'est 
pas verifiee, done, si aucune autre video ne prend la place centrale, nous reactivons le mur 
d'images (addEventListener). 

Le programme se termine avec la gestion des rollOver : 
// rollOver 

cont enu_mc.addEvent List ener (MouseE vent .MOUSE_OVER, over) ; 
function over (evt :MouseEvent) { 

evt. target. ecranVideo . play ( ) ; 

evt. target. f ilters=[haloIn] ; 

} 

cont enu_mc. addEventListener (MouseE vent .MOUSE_OUT,out) ; 
function out (evt :MouseEvent) { 
evt. target. ecranVideo. stop() ; 

evt. target. filters=[haloOut] ; 

} 

Lorsque l'utilisateur survole un conteneur, la video qu'il vehicule est jouee (evt. tar- 
get. ecranVideo. play ()). Le filtre du halo blanc est execute (evt . target . fil- 
ters=[haloIn]). 

Les memes instructions, mais neutralisees, sont executees lorsque le pointeur quitte la sur- 
face de l'objet (M0USE_0UT). 



La galerie optimisee 

Dans cette version, nous optimisons la gestion des proprietes de chaque objet avant de rea- 
liser les animations et developper l'interactivite. Nous distribuons ensuite, sous la forme de 
commandes compactes, chacune des instructions deja etudiees dans la version precedente. 

Exemples ch9_3DNative_4b fla 

Le document possede une structure similaire au precedent. La fenetre Actions affiche le 
code suivant : 

// initialisation 

import flash. filters. *; 

var haloln :GlowFilter=new GlowFilter(0xff ff ff , 1, 2, 2, 3, 255, false, false); 
var haloOut:GlowFilter=new GlowFilter(0xffffff , 0, 2, 2, 3, 255, false, false); 

import gs.TweenMax; 
import gs. easing.*; 
import gs. events.*; 

var demieScene: Number=stage . stageWidth/2; 
var hauteurScene : Number=stage . stageHeight/2; 
var Tween3D:TweenMax; 
var nomlmageActive : String ; 
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configuration des ecrans video 



var datas: Array = [ 

{source: "video3D/3d-gKaster-C19.f4v" , rotationY: -30, x: -245, y : -72, z:-25}, 
{source: " video3D/ 3d- gKaster- amusement .f4v" , rotationY : 0, x : 0,y: -72, z: 40}, 
{source: " video3D/3d-gKaster-balistic .f4v" , rotationY: 30, x: 245, y : -72, z : -25} , 
{source : "video3D /3d- gKaster- demoreel . f 4v" , rotationY: -30, x : -245,y : 72, z : -25} , 
{source : " video3D/3d-galaxieFull .f 4v" , rotationY :0,x :0,y : 72, z :40} , 
{source : " video3D/3d-particules .f 4v" , rot at ion Y: 30, x : 245, y: 72, z : -25} 



for (var i:Number=0; i<contenu_mc.numChildren; i++) { 

contenu_mc[ "v"+i+"_mc" ] .ecranVideo.source=datas[i] .source; 

contenu_mc[ " v"+i+"_mc" ] . rotationY=datas[i] . rotationY; 

contenu_mc[ "v"+i+"_mc" ] .z=datas[i] .z; 

contenu_mc[ " v"+i+"_mc" ] . ecranVideo. stop( ) ; 

contenu_mc[ "v"+i+"_mc" ] . ecranVideo. scaleMode="exactFit" ; 

contenu_mc[ "v"+i+"_mc" ] . ecranVideo. autoPlay=f alse; 



// mur d 1 image 3D 

contenu_mc. addE vent List ener( Event .ENTER_FRAME,mur Images) ; 
function murlmages (evt:Event) { 

contenu_mc . rotationY=(mouseX-demieScene) *0. 1 ; 

contenujnc . rotationX=(mouseY-hauteurScene) *-0 . 1 ; 

} 

// interactivity video 

contenu_mc . addE vent List ener (MouseE vent .CLICK, zoomVideo) ; 
function zoomVideo (evt:MouseEvent) { 

// 

contenujnc . removeEvent List ener (Event . ENTER_FRAME, mur Images) ; 
TweenMax.to(contenu_mc, 3, {rotationX:0, rotationY:0, delay:0, 
ease:Elastic.easeInOut}) ; 

// 

for (var i:Number=0; i<contenu_mc . numChildren ; i++) { 

Tween3D=TweenMax . to(contenu_mc[ " v"+i+"_mc" ] , 0.3, {z : datas [i] . z, 
■ x:datas[i] .x, y : datas [i] .y, rotationY: datas [i] .rotationY, delay :0, 
ease : Strong . easel nOut}) ; 

TweenMax.to(contenu_mc["v"+i+"_mc" ] .ecranVideo, 2, {width: 220, 
height : 123, x:-110, y:-62, delay:0.3, ease:Elastic.easeOut}) ; 

} 

// 

Tween3D. addE vent List ener (TweenEvent .COMPLETE, restaureFini) ; 
function restaureFini (yo:TweenEvent) { 

contenujnc . addChild (MovieClip(evt .target) ) ; 

} 

if (nomImageActive!=evt. target. name) { 
nomImageActive=evt . target . name 



]; 



} 



// 



actions 
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// 

TweenMax.to(evt. target. ecranVideo, 2, {width:440, height:246, x:-220, 
»»y:-123, delay:0.3, ease:Elastic.easeOut}) ; 

TweenMax.to(evt. target, 2, {z:-100, x:0, y:0, rotationY:0, delay:0.3, 
ease : Elastic . easeOut} ) ; 
} else { 

nomImageActive=" " ; 

contenu_mc .addEvent Listener ( Event . ENTER_FRAME,mur Images) ; 

} 

} 

// rollovers 

contenu_mc . addE vent List ener (MouseE vent .MOUSE_OVER,over) ; 
function over (evt :MouseEvent) { 

evt. target. ecranVideo. play() ; 

evt .target .f ilters=[haloIn] ; 

} 

contenu_mc . addE vent List ener (MouseE vent . MOUSE_OUT, out ) ; 
function out (evt :MouseEvent) { 

evt .target .ecranVideo . stop( ) ; 

evt. target. filters=[haloOut] ; 

} 

Dans la premiere partie du code, nous commencons par instancier l'ensemble des proprietes 
de chaque video a travers un tableau, grace a la methode Array. Pour chaque nouvelle 
entree, nous ouvrons et fermons une paire d'accolades. Chaque bloc cree enregistre, sous la 
forme de parametres, chacune des proprietes et valeurs dont nous souhaitons disposer par la 
suite dans les fonctions d' animation : 

var datas: Array = [ 

{source: "video3D/3d-gKaster-C19.f4v" , rotationY: -30, x: -245, y : -72, z:-25}, 
{source: " video3D/ 3d- gKaster- amusement .f4v" , rotationY : 0, x : 0,y: -72, z: 40}, 
{source: " video3D/3d-gKaster-balistic .f4v" , rotationY: 30, x: 245, y : -72, z : -25} , 
{source : " video3D/3d-gKaster-demoreel . f 4v" , rotationY: -30, x: -245, y : 72, z : -25} , 
{source : " video3D/3d-galaxieFull .f 4v" , rotationY : 0, x :0,y: 72, z : 40} , 
{source : " video3D/3d-particules .f 4v" , rot at ion Y: 30, x : 245, y: 72, z : -25} 

]; 

Puis, nous utilisons une boucle for pour affecter, aux differents objets, les proprietes stockees 
dans le precedent tableau : 

for (var i:Number=0; i<contenu_mc.numChildren; i++) { 

contenu_mc[ "v"+i+"_mc" ] . ecranVideo. source=datas[i] .source; 

contenu_mc[ " v"+i+"_mc" ] . rotationY=datas[i] . rotationY; 

contenu_mc[ "v"+i+"_mc" ] .z=datas[i] .z; 

contenu_mc[ " v"+i+"_mc" ] . ecranVideo. stop ( ) ; 

contenu_mc[ "v"+i+"_mc" ] . ecranVideo. scaleMode="exactFit" ; 

contenu_mc[ "v"+i+"_mc" ] . ecranVideo. autoPlay=f alse; 

} 

Dans ce contexte, pour cibler chaque objet individuellement, nous designons d'abord le 
conteneur principal (contenu_mc), suivi de ses elements descendants grace a une syntaxe 
tabulee (avec des crochets []). En parametre de cette structure, nous appelons les objets par 
leur nom d' occurrence en utilisant la valeur de i pour les distinguer les uns des autres 
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(contenu_mc [ " v " +i+ "_mc " ] ). II ne reste alors qu'a appliquer les valeurs relatives a chaque 
propriete initialement definie dans le tableau datas, pour affecter directement 1' ensemble 
des objets. Ce qui donne, par exemple, pour le chemin de reference de chaque fichier video 
designe par la propriete source : 

contenu_mc[ " v"+i+"_mc" ] . ecranVideo . source=datas[ i] . source; 

Lorsque nous avons besoin de faire reference a chaque propriete de chacun des objets, nous 
invoquons egalement, dans les animations, le nom du tableau (datas) suivi du numero 
d'ordre d' apparition de l'objet cible (avec [i]) et de la propriete concernee (par exemple 
. z). Ce qui donne pour la propriete z : 

datas [ i] . z 

Nous avons ensuite remplace la repetition des interpolations TweenMax par une animation 
type, repetee dans une boucle for. Pour cibler chaque objet individuellement, nous repre- 
nons le mecanisme aborde pour l'affectation des proprietes, dans la premiere partie du 
programme. Ce qui donne : 

contenu_mc[ "v"+i+"_mc" ] 

A chaque iteration des boucles for, ce sont tous les objets enregistres qui sont affectes. Pour 
mettre a jour les donnees, il suffit done de modifier les valeurs stockees dans le tableau 
initial (datas). L' ensemble de la construction est instantanement mise a jour. 

A retenir 

■ Afin d'optimiser les ressources d'affichage, si des videos sont deployees, il est souhaitable de ne pas 
les jouer toutes simultanement et de les organiser pour un affichage frontal. 

■ Les composants videos ne disposent pas des memes proprietes que les MovieClip. II est possible 
d'animer ces composants dans des MovieClip pour disposer de plus de controles sur chacun des 
objets. 

■ Pour optimiser le stockage de valeurs et simplifier la distribution des instructions sur plusieurs objets 
simultanement, nous utilisons deux types de structure : les tableaux et une boucle for. Les tableaux 
permettent le stockage des proprietes. La boucle simplifie leur affectation. 

■ Afin de cibler dynamiquement un symbole d'un conteneur parent, nous pouvons le capturer en 
designant d'abord le conteneur parent, et a I'aide de crochets, nous y inscrivons en parametre le 
nom de l'objet enfant. 



Navigation spatiale 3D facon TimeMachine ou Aero 

Puisque la 3D offre une profondeur Z, nous pouvons aussi distribuer les contenus de 
Farriere-plan vers le premier plan comme le proposent, par exemple, les systemes de navi- 
gation connus que sont Aero pour Windows et TimeMachine pour Apple (voir Figure 9.26). 

Dans cette section, nous allons voir comment realiser une navigation sur l'axe Z. Pour cela, 
nous utilisons differents MovieClip places dans le scenario. 
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Figure 9.26 

Apercu du 
systeme d'archi- 
vage Apple Time 
Machine. 




En cliquant sur une fleche, nous modifions leur position en Z avec une transition. Mais nous 
ajoutons au dispositif un systeme de boucle qui permet aussi de replacer les images deja 
visitees, a l'arriere de la file. Nous ajoutons egalement un effet d'opacite selon la profon- 
deur des objets. Nous declinons enfin le principe en sens inverse avec une fleche qui oriente 
le mouvement dans le sens oppose (voir Figure 9.27). 



Figure 9.27 

Apercu du 
document publie. 
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Exemples > ch9_3DNative_5.fla 

Sur la scene principale du document "ch9_3DNative_5.fla", nous pouvons voir un symbole 
contenujnc qui integre une serie de neuf MovieClip. Chacun dispose d'un nom d'occur- 
rence et est reparti vers les caiques, dans l'ordre d'affichage qui correspond a l'ordre 
d'empilement dans l'espace. Un symbole navigation_mc contient egalement deux fleches, 
haut et bas, pour faire avancer et reculer les images sur l'axe Z (voir Figure 9.28). 



Figure 9.28 

Apercu de la 
scene principale. 




Dans la fenetre de scenario, nous identifions les symboles contenujnc et navigation_mc 
(voir Figure 9.29). 



Figure 9.29 
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La fenetre d' actions affiche le code suivant : 

// initialisation 

import gs.TweenMax; 
import gs. easing.*; 
import gs. events.*; 
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var tween3DAvant :TweenMax; 
var tween3DArriere:TweenMax; 



rnntpni i 


inc 


nhn+nl 

|J I I U L U I 


inc 




= 1 600 ' 


contenu_ 


_mc 


photo2_ 


_mc 


z 


= 1400; 


contenu_ 


_mc 


photo3_ 


_mc 


z 


= 1200; 


contenu_ 


_mc 


photo4_ 


_mc 


z 


= 1000; 


contenu_ 


_mc 


photo5_ 


_mc 


z 


=800; 


contenu_ 


_mc 


photo6_ 


_mc 


z 


=600; 


contenu_ 


_mc 


photo7_ 


_mc 


z 


=400; 


contenu_ 


_mc 


photo8_ 


_mc 


z 


=200; 


contenu_ 


_mc 


photo9_ 


_mc 


z 


=0; 



navigationjnc . rotationX=-90; 

// actions 

// point de fuite 

var pointDeFuite: Point=new Point(stage.stageWidth/2,0) ; 
transform . perspectiveProj ection . proj ectionCenter=pointDeFuite; 

// Avancer 

navigationjnc .f lecheHaut_btn . addEvent List ener(MouseE vent .CLICK, avancer) ; 
function avancer(evt:MouseEvent) { 

for (var i:Number=0; i<contenu_mc.numChildren-1 ; i++) { 
TweenMax.to(contenujnc.getChildAt(i) , 0.5, 
{z : contenujnc .getChildAt (i) . z-200, alpha: 1 . 1 - ( (contenujnc . getChildAt (i) . z) / 
■1600), delay:0, ease:Strong.easeInOut}) ; 
} 

if (contenujnc. getChildAt(contenujnc.numChildren-1 ) .z<1 ) { 

tween3DAvant=TweenMax . to (contenu_mc . getChildAt ( contenu_mc . numChildren- 
* 1 ) , 0 .5, {alpha :0, delay :0, ease: Strong . easeOut} ) ; 

} 

tween3DAvant . addEvent List ener (TweenEvent . COMPLETE, sortie) ; 

} 

// 

function sortie(evt:TweenEvent) { 

contenujnc . getChildAt (contenujnc . numChildren-1 ) . z=1600; 

contenu_mc . addChildAt ( contenu_mc . getChildAt (contenujnc . numChildren-1 ) , 0) ; 

} 

// Reculer 

navigationjnc.f lecheBasjDtn . addEvent List ener (MouseEvent .CLICK, reculer) ; 
function reculer(evt:MouseEvent) { 

for (var j:Number=0; j<contenujnc.numChildren; j++) { 

tween3DArriere=TweenMax.to(contenujnc.getChildAt( j ) , 0.5, 
{z: contenujnc. getChildAt (j ) .z+200, alpha:1-( (contenujnc . getChildAt ( j ) .z) 
»/1600), delay:0, ease:Strong.easeInOut}) ; 
} 

tween3DArriere . addEvent List ener (TweenEvent .COMPLETE, entree) ; 

} 
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// 

function entree (evt :TweenEvent) { 
contenujnc . getChildAt (0) . alpha=0; 

contenu_mc . addChildAt (contenujnc . getChildAt (0) , contenujnc . numChildren-1 ) ; 

// 

var nombreDeBoucle : Number=1 ; 
var dureeBoucle:Number=100; 

var boucle :Timer=new Timer(dureeBoucle, nombreDeBoucle) ; 
boucle . addEvent Listener (Time rEvent .TIMER, lance rBoucle) ; 
boucle . start ( ) ; 

} 

// 

function lancerBoucle (evt:TimerEvent) { 

contenujnc .getChildAt (contenujnc . numChildren-1 ) .z=0; 

TweenMax.to(contenujnc.getChildAt(contenu_mc.numChildren-1 ) , 0.5, {alpha:1 , 
«• delay:0, ease:Strong.easeInOut}) ; 

} 

// initialiser les alphas 

for (var k:Number=0; k<contenu_mc . numChildren-1 ; k++) { 

contenujnc .getChildAt ( k) . alpha=1 - ( (contenujnc . getChildAt (k) . z) /1 600) ; 

} 

Le programme est structure en cinq parties dont : l'initialisation, la gestion du point de 
fuite, la navigation avec la fleche du haut, puis avec la fleche du bas, et enfin, la gestion de 
l'opacite au lancement de l'application. L'ordre d'execution et les valeurs de calcul n'etant 
pas les memes pour les deux fleches, nous avons prefere isoler ici les deux fonctions. 

D'abord, nous definissons les classes et quelques variables requises pour les transitions. 
Nous modifions ensuite l'agencement des contenus dans l'espace. 

Plus loin, dans les actions, nous redefinissons la position du point de fuite, par defaut place 
au centre de la scene. Dans notre configuration, nous voulons surplomber legerement 1' ani- 
mation de maniere a percevoir les objets, de meme dimensions, situes a l'arriere-plan des 
premiers elements. Pour ce faire, nous utilisons la propriete f iledOfView de la classe 
perspectiveProj ection : 

// point de fuite 

var pointDeFuite: Point=new Point(stage.stageWidth/2,0) ; 
transform . perspectiveProj ection . proj ectionCenter=pointDeFuite; 

Le point de fuite est designe par un objet Point qui possede deux valeurs, x et y (vu lors de 
la programmation de squelettes). 

Le principe du point de fuite, en perspective, est de situer le point de depart de tous les tra- 
ces fuyants qui partent de la ligne d'horizon. Plus le point de fuite est haut, plus vous dominez 
la scene. Plus vous prenez, en somme, de 1' altitude. 

Vous pouvez aussi placer le point de fuite horizontalement. Cela determine la direction de la 
perspective. Si le point de fuite est situe a gauche (de valeur x faible), vous vous placez alors 
a gauche de la scene et 1' objet se trouve sur votre droite. Si le point de fuite se trouve a 
droite, votre regard aussi se retrouve a droite et 1' objet, lui, se retrouve a gauche (voir 
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Figure 9.30). Vous placez le point de fuite en fonction du cote de l'objet que vous souhaitez 
observer. 

Le point de fuite represente aussi le reflet de la position de votre ceil sur la ligne d'horizon, 
autrement dit, du point de vue. 



Figure 9.30 

Placement du 
point de fuite. 



Point de fuite a gauche 
Point de vue a gauche, 
(l'objet est a droite) 




Point de fuite a droite, 
Point de vue a droite. 
(l'objet est a gauche) 



Proprietes 3D de la scene 

La scene comporte plusieurs proprietes qui peuvent etre controlees en ActionScript, y compris en 
animation. Ces proprietes sont : le champ de vision, le point de fuite et la focale. 

■ Le champ de vision se definit entre 0 et 1 80 degres. Le code suivant applique un champ de 
vision de 55°, qui est aussi la valeur appliquee par defaut. 

var champDeVision:Number=55; 

this .transform . perspectiveProj ection . f ieldOf View=champDeVision ; 

■ Le point de fuite designe le point de depart de tout trace de forme perspective, a partir de la 
ligne d'horizon. II represente la position de 1'ceil du spectateur. Le code suivant indique la valeur 
appliquee par defaut dans un document Flash 3D : 

var pointDeFuite: Point = new Point( stage. stageWidth/2, stage. stageHeight/2) ; 
transf orm. perspectivePro j ection . projectionCenter = pointDeFuite; 

■ La focale indique le type de deformation applique aux fuyantes, determine par la distance entre 
I'ecran et l'objet. La focale est calculee dynamiquement, comme suit : 

var focale:uint=stage.stageWidth/ 2 * ( Math . cos (champDeVision/2) / 

Math . sin (champDeVision/2) ); 
transf orm. perspectivePro] ection .focalLength= focale; 

■ Vous pouvez, par exemple, modifier la focale ou toute autre propriete de la scene 3D, en la mani- 
pulant a travers une instruction, comme celle-ci ou les valeurs utilisees reprennent la position cou- 
rante du pointeur en X : 

addEvent Listener (Event . ENTER_FRAME,f ocaleTest ) ; 
function focaleTest(evt:Event) { 

transf orm. perspectivePro] ection .focalLength=mouseX; 

} 
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Le defilement des images de l'arriere vers le premier plan est active par la fleche du haut. 
Les actions associees a ce comportement sont rassemblees dans la partie "Avancer" : 

// Avancer 

navigationjnc.f lecheHaut_btn. addEvent Listener (MouseEvent .CLICK, avancer) ; 
function avancer(evt:MouseEvent) { 

for (var i:Number=0; i<contenu_mc.numChildren-1 ; i++) { 
TweenMax . to (contenu_mc . getChildAt (i) , 0.5, 
{z:contenu_mc.getChildAt (i) .z-200, alpha: 1 . 1 - ( (contenu_mc. getChildAt (i) . z) 
/1600), delay:0, ease:Strong.easeInOut}) ; 
} 

// autres actions 
} 

Dans un premier temps, la fonction avancer est executee sur un clic de souris. Dans cette 
fonction, nous mettons en place une boucle for qui applique une interpolation TweenMax 
pour l'ensemble des elements contenus dans le clip principal (avec contenu_mc . get- 
ChildAt(i)), comme vu precedemment. La transition reduit ici l'index z d'une valeur 
de 200 pixels, pour chaque objet de la liste d'affichage et les fait ainsi progresser, simulta- 
nement, vers l'ecran. 

Dans le meme temps, un alpha permet de modifier aussi l'opacite des objets en fonction de 
leur index respectif : 

alpha: 1 (contenu_mc. getChildAt (i) .z) /1600) , 

La valeur 1 600 correspond au seuil que nous avons arbitrairement fixe, pour le demarrage 
du defilement, en placant le premier objet a cette profondeur (voir les parametres d'initiali- 
sation en debut de programme). 

Dans cette equation, plus l'index est proche de 1 600, plus 1' alpha diminue. Inversement, 
plus il tend vers 0, plus 1' objet se revele. 

Pour comprendre plus precisement le calcul, nous savons que l'alpha se mesure sur une 
echelle de 0 a 1. Or, l'index maximum que nous observons est 1 600. II n'est pas possible 
d'appliquer un alpha de 1 600 en attribuant systematiquement la valeur de l'index z comme 
valeur d'alpha. L'equation reprend done l'index z de chaque objet et le divise par la profon- 
deur z maximum pour obtenir une valeur comprise entre 0 et 1 . 

Mais, ce faisant, nous obtenons l'inverse de ce que nous desirons. L'alpha est nul pour les 
images de premier plan et vaut presque 1 pour les images situees a l'arriere. Pour inverser 
les valeurs, nous effectuons done une petite soustraction a partir de la valeur d'alpha maxi- 
mum : 1. Enfin, pour garantir toutefois que les premieres images situees en premier plan 
demeurent integralement visibles et ne risquent pas d'etre legerement translucides (d'alpha 
legerement inferieur a 1), nous augmentons la valeur a 1.1. 

A la suite, dans la meme fonction, nous placons quelques structures conditionnelles pour 
determiner quels objets de la liste doivent etre replaces au premier-plan : 

function avancer(evt:MouseEvent) { 

for (var i:Number=0; i<contenu_mc.numChildren-1 ; i++) { 

TweenMax. to(contenu_mc.getChildAt(i) , 0.5, 
{z : contenujnc .getChildAt (i) . z-200, alpha: 1 . 1 - ( (contenujnc . getChildAt (i) . z) / 
•1600), delay:0, ease:Strong.ease!nOut}) ; 
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} 

if (contenu_mc.getChildAt ( contenujnc. numChildren-1 ) . z<1 ) { 

tween3DAvant=TweenMax . to (contenu_mc . getChildAt ( contenujnc . numChildren- 
1) , 0.5, {alpha :0, delay :0, ease: St rong.easeOut}) ; 

} 

tween3DAvant . addE vent List ener(TweenEvent .COMPLETE, sortie) ; 

} 

// 

function sortie(evt:TweenEvent) { 

contenujnc . getChildAt (contenujnc . numChildren-1 ) . 2=1 600 ; 

contenujnc . addChildAt ( contenujnc . getChildAt (contenujnc . numChildren-1 ) , 0) ; 

} 

Une condition verifie d'abord les objets dont l'index est inferieur a 1, c'est-a-dire que nous 
nitrons uniquement les objets situes au premier plan. Pour ces objets, nous ajoutons une 
interpolation qui le fait disparaitre avec 1' alpha passe a 0. 

Des que la transition (tween3DAvant) est terminee (COMPLETE), un ecouteur execute une 
autre fonction (sortie). Nous modifions alors l'index z de l'objet situe au sommet de la liste 
d'afhchage, c'est-a-dire, en premier plan, et le ramenons a 1 600, done, a une echelle qui le 
represente a l'arriere-plan. Mais, comme nous le savons, la 3D dans Flash est limitee a cha- 
que objet. II faut done, en plus, modifier l'ordre d'empilement de l'objet dans la liste d'affi- 
chage. La deuxieme instruction prend done l'objet situe au sommet de la pile 
(contenujnc . getChildAt (contenujnc . numChildren-1 )) pour le replacer au-dessous 
(0). 

Les actions executees pour la fleche du bas sont une declinaison de la fleche du haut, a ceci 
pres que les valeurs z et alpha sont inversees. 

Nous relevons neanmoins que, par necessite, nous utilisons un chronometre (Timer) pour 
decaler, dans le temps, les deux methodes qui interviennent sur l'ordre d'affichage (add- 
Child ( ) et getChild ( )) arm d'eviter les conflits. En executant les deux instructions simul- 
tanement, selon le contexte et le poids des contenus affiches dans les objets, le 
repositionnement a l'index z pourrait effectivement ne pas avoir lieu, ecrase par la methode 
addChild ( ) , prioritaire et peut-etre toujours en cours d'execution : 

// 

function entree (evt :TweenEvent) { 
contenujnc . getChildAt (0) . alpha=0; 

contenujnc . addChildAt (contenujnc . getChildAt (0) , contenujnc . numChildren-1 ) ; 

// 

var nombreDeBoucle:Number=1 ; 

var dureeBoucle:Number=100; 

var boucle :Timer=new Timer(dureeBoucle, nombreDeBoucle) ; 
boucle. addE vent Listener (TimerE vent .TIMER, lancerBoucle) ; 

boucle . start ( ) ; 

} 

// 

function lancerBoucle (evt:TimerEvent) { 

contenujnc .getChildAt (contenujnc . numChildren-1 ) . z=0; 

TweenMax.to(contenujnc.getChildAt(contenujnc.numChildren-1 ) , 0.5, {alpha:1 , 
» delay:0, ease:Strong.easeInOut}) ; 

} 
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Le programme s'acheve avec 1' initialisation de l'alpha au demarrage de 1' application. Ceci 
afin d'appliquer, des le debut, une transparence aux objets situes en profondeur : 

// initialiser les alphas 

for (var k:Number=0; k<contenu_mc.numChildren-1 ; k++) { 

contenu_mc .getChildAt ( k) . alpha=1 - ( (contenujnc . getChildAt (k) . z) /1 600) ; 

} 

Dans le fichier SWF, les deux fleches actionnent le defilement, dans un sens comme dans 
1' autre, en preservant toujours l'alpha et les index de chaque objet. 

Pour en savoir plus sur la 3D dans Flash, et notamment sur la gestion de formes matricielles (volumes 
composes de triangles), consultez I'adresse suivante : http://help.adobe.com/fr_FI7/ActionScript/ 
3.0 ProgrammingAS3/WSF24A5A75-38D6-4a44-BDC6-927A2B1 23E90.html. Dautres techni- 
ques permettent aussi de gerer la 3D a partir de formes deja modelees. Nous les abordons au chapi- 
tre suivant. 

A retenir 

■ Vous pouvez controler la focale et le point de fuite d'une perspective 3D grace a la propriete pers- 
pectiveProj ection. 

■ L'ordre d'affichage des objets determine la coherence d'un systeme de navigation spatial. Nous utili- 
sons la methode addChild( ) afin de redistribuer les objets selon leur position sur I'index z. 

Synthese 

Dans ce chapitre, vous avez appris a creer des presentations 3D a partir des classes natives 
de Flash, compatibles avec Flash 10 (CS4) et versions ulterieures. La 3D dans Flash est 
simple, mais, ne permet pas encore d' importer directement des objets modelises en 3D sans 
recourir a des classes externes. Elle apparait malgre tout en voie de standardisation. Le lec- 
teur 10 est, fin 2009, deja implante en Europe a pres de 92 % des postes utilisateurs dispo- 
sant d'un lecteur Flash. La 3D reste done a ce jour largement compatible avec les 
configurations existantes des utilisateurs (source : http://www.adobe.com/products/ 
play er_census/flashplayer/ve rsion_penetration.html). Seule la solidite de la configura- 
tion (ressources graphiques et bandes passantes) peuvent en temperer encore la diffusion. 
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Introduction 

Si nous pouvons creer des interfaces 3D a partir d'objets 2D, dans Flash, il n'est pas encore 
possible d'y importer des objets 3D reels et d'interagir nativement avec eux. Cependant, des 
classes ActionScript libres sont disponibles pour la gestion de la 3D reelle au sein de l'envi- 
ronnement Flash. Certaines -comme PaperVision - sont compatibles avec d'anciennes 
versions de Flash, pour AS3 et AS2 et Flash 9 (et les versions suivantes). 

Dans ce chapitre, nous allons voir comment installer PaperVision pour AS3 sous Windows 
et Mac OS X, ainsi que la maniere d'interagir sur des animations d'objets 3D reels exportes 
depuis l'application libre Google Sketchup ou tout autre logiciel 3D. Nous allons egalement 
decouvrir comment controler des environnements 3D, crees a partir de simples primitives 
avec le clavier pour simuler la navigation dans un espace en trois dimensions. 

A Tissue de ce chapitre, vous serez en mesure de creer des visionneuses d'objets 3D et des 
galeries 3D. 

Installer PaperVision 

La classe PaperVision rassemble une serie de fonctionnalites 3D, regroupees dans un 
meme repertoire. Pour en disposer, nous devons d'abord telecharger cette classe. Une fois 
chargee sur votre ordinate ur, elle doit etre copiee dans le repertoire de votre site, au meme 
niveau que les documents Flash qui constituent votre projet. Si, pour automatiser le proces- 
sus, nous souhaitons centraliser la gestion des classes, nous devons redefinir les preferences 
de Flash. Nous detaillons cette procedure plus loin dans ce chapitre. 

Une fois dans Flash, pour invoquer les sous-classes PaperVision, qu'elles aient ete placees 
localement ou integrees a l'API, nous y faisons reference directement depuis la fenetre des 
Actions. A la compilation, Flash integre les scripts utilises, requis pour la gestion des com- 
mandes 3D. Une fois deployees, elles n'ont done pas besoin d'etre placees sur le serveur. 
Seuls les objets 3D et les textures eventuellement appelees par le code doivent accompagner 
le document SWF. 

Dans ce chapitre, nous developpons les commandes 3D de PaperVision directement dans 
le scenario. De nombreux developpeurs adoptent la methode externalisee sous la forme de 
packages (classes . as). Nous verrons, dans ce chapitre, qu'il n'est pas necessaire de recourir 
a une externalisation du code pour executer PaperVision. 

La classe PaperVision etant constituee de nombreux fichiers et de sous-dossiers, vous trouve- 
rez plus facile d'acceder a une version zippee de cette classe. Vous en trouverez une sur le site 
Googlecode al'adresse : http://code.google.eom/p/papervision3d/downloads/list. 
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Vous pouvez aussi la telecharger en suivant directement le lien qui correspond a la derniere 
version publiee au moment oil nous editons cet ouvrage : http://papervision3d.google- 
code.com/files/Papervision3D_2.1.920.zip. 

Bien que cette methode de chargement soit simple, de nombreux utilisateurs preferent gerer 
le telechargement des classes a l'aide d'utilitaires capables d'en assurer la mise a jour, 
lorsque la source distante a ete modifiee par exemple. 

Nous vous proposons, pour repondre a de nombreuses questions en rapport avec cette tech- 
nique de chargement, de presenter ces utilitaires dans les deux sections suivantes (Tortoise 
SVN pour Windows et SVNX pour Mac OS X). Pour les lecteurs qui auront telecharge 
PaperVision a partir du format zippe, vous pouvez passer directement a la section "Integrer la 
classe PaperVision a Flash". 



Telechargement avec Tortoise SVN pour Windows 

L'utilitaire de chargement de dossiers nomme Tortoise SVN, compatible Windows, est 
disponible gratuitement a l'adresse suivante : http://tortoisesvn.tigris.org/. 

Pour installer cet utilitaire, procedez comme suit : 

1. Sur le site http://tortoisesvn.tigris.org/, cliquez directement sur l'onglet Downloads. 
En bas de la page de chargement, apparait un tableau affichant toutes les versions dispo- 
nibles, filtrees par langue et version de systeme (32 bits ou 64 bits) 



Figure 10.1 

Telechargement 
de l'utilitaire 
Tortoise SVN pour 
Windows. 
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2. Cliquez sur le lien Setup correspondant a votre version de systeme. Le chargement 
s'effectue. Des supports au format PDF sont egalement disponibles en francais : Sepa- 
rate manual (PDF). Vous pouvez, si besoin, les telecharger. 

3. Installez le logiciel en double-cliquant sur l'icone d' installation chargee sur votre poste 
de travail. Puis validez toutes les etapes. 

Une fois installe, vous le retrouvez dans le dossier Program files et dans le menu Demarrer > 
Applications. Le principe de l'utihtaire Tortoise SVN est de rendre ses fonctions accessibles 
par un simple clic-droit sur le repertoire de votre choix. Vous pouvez alors y importer un 
dossier distant a partir d'une URL, mettre a jour le contenu eventuellement deja charge : 

4. Directement, sur le dossier racine de votre projet, faites clic-droit > SVN CheckOut. 
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5. Dans la boite de dialogue, saisissez PURL de la classe PaperVision - ou d'une autre 
classe a importer : http://papervision3d.googlecode.com/svn/trunk/as3/trunk/src/ 
(voir Figure 10.2). 

6. Puis cliquez sur OK. 



Figure 10.2 

Importer la classe 
avec TortoiseSVN 
sous Windows. 



Repository 

URL of repository: 

h ttp : //paper vision 3d . googlecode 
Checkout directory: 
C:\UsersVArzhur Caouissin desktop teite 

Checkout Depth 



/svn/trunk/as3/trunk/src/ 




7. Une fenetre de chargement s'affiche. Patientez. Une fois le chargement termine, cliquez 
a nouveau sur OK (voir Figure 10.3). 
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8. A Pinterieur de votre dossier, la classe PaperVision a ete importee. Elle apparait sous 
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La classe est disponible dans votre projet. Vous pouvez l'invoquer directement depuis votre 
document Flash. 



Telechargement avec SVNX pour Mac OS X 

L'utilitaire de chargement de dossiers, nomme SVNX et compatible Mac OS X, requiert 
deux installations : le plug-in SCPlugin et l'utilitaire SVNX. 

Le plug-in SCPlugin est disponible a cette adresse : http://scplugin.tigris.org/servlets/ 
ProjectDocumentList. L'utilitaire SVNX ici : http://www.lachoseinteractive.net/en/ 
community/subversion/svnx/download/. 

1. Pour installer d'abord le plug-in, saisissez dans votre navigateur 1 ' adresse : http:// 
scplugin.tigris.org/servlets/ProjectDocumentList. 

2. Puis, cliquez sur la derniere version de l'installeur proposee dans la liste de telechargement 
(voir Figure 10.5). 
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3. Le package telecharge ouvre une fenetre d' installation (voir Figure 10.6). 



Figure 10.6 

Installation du 
plug-in SCPlugin 
pour Mac OS X. 



Installer SCPlugin 



Bienvenue dans le programme d'installation du logkiel SCPlugin 



8 Introduction 

• Lisez-moi 

^^mcence 

• Destination 

• Type d'installation 

• Installation 

• Resume 




SCPlu g in Q.7.3q 
About string: SCPlugin trunk r868M. SVN 1 .4.6 
RELEASE 

OS X: 10.3.9 (untested ) 10.4.x (untested) 10.5.x 
Platforms: i386. ppc 



This package installs SCPlugin, a system extension that enables you to 
do Subversion operations from the Finder. 



If you want to uninstall it, remove these: 



/Library/Contextual Menu Items/SCRnderPlugin.plugin 
/Library/Receipts/SCPIugin.pkg 



and log out or restart. 



( Continuer ) 



5. Validez toutes les etapes jusqu'a l'ecran final (voir Figure 10.7). 
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Figure 10.7 

Confirmation de 
I'installation. 
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L'installation a reussi 

Le logiciel a ete installe avec succes. 



SUB 










( Fermer ~ ^ 



Le dossier du plug-in apparait sur votre bureau (voir Figure 10.; 

Figure 10.8 

Plug-in installe. 



SCPIugin-0.7.3q-SVN. 1.4.6 

1 element. 28 Mo disponibles 



SCPIugin-0.7.3q-SVN. 
1.4.6.pkg 



□ SCPIugin-0.7.3q-SVN. 1.4.6 



Vous pouvez maintenant installer l'utilitaire SVNX disponible a l'adresse suivante : http:// 
www.lachoseinteractive.net/en/community/subversion/svnx/download/. 

6. Dans la page de chargement, cliquez directement sur l'icone situee en bas de page pour 
le chargement de 1' application (voir Figure 10.9). 

7. Une fois le chargement effectue, glisser-deposez directement 1' application du reper- 
toire, ouvert automatiquement, vers le dossier Applications de votre systeme. Pour 
organiser les fichiers, deposez-les dans un nouveau repertoire que vous nommerez 
SVNX (voir Figure 10.10). 
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Figure 10.9 

Telechargement 
de I'utilitaire 
SVNX pour 
Mac OS X. 
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Figure 10.10 

Telechargement 
de I'utilitaire 
SVNX pour 
Mac OS X. 
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□ svnX 




4 elements. 6.1 Mo disponibles 







Une fois copie dans Applications, I'utilitaire est fonctionnel. Pour charger la classe Paper- 
Vision, via I'utilitaire SVNX : lancez I'utilitaire SVNX en double -cliquant dessus. Deux 
fenetres apparaissent (voir Figure 10.11). 



Figure 10.1 1 

Ouverture de 
I'utilitaire SVNX. 



H3 



E3 



Seule la premiere fenetre nous interesse. Elle designe l'URL a telecharger : 

1. Pour derinir un nouveau chargement, dans la fenetre gauche, cliquez sur le bouton Plus. 

2. Puis, renseignez un Nom (champ Name). Saisissez par exemple PaperVision3D. 
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3. Dans le champ Path, inscrivez l'adresse de la classe PaperVision a importer (voir 
Figure 10.12) : http://papervision3d.googlecode.com/svn/trunk/as3/trunk/src/. 



Figure 10.12 

Definition 
du contenu a 
importer (fenetre 
de gauche). 
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Pass 













Le chargement du contenu appele par PURL se fait en double -cliquant sur la reference du 
chargement que nous venons de creer, dans la liste situee au sommet de la premiere fenetre 
(voir Figure 10.13). 



Figure 10.13 

Ouverture de la 
fenetre de 
chargement. 
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Dossi/r de la ckYusers/Arzhur/Desktop/lravail/nomDuProjet/site 



Name : Dossier de la classe paperVision dans mon projet 

Path : Q. lUsersiArzhur.'Desktop/travail/nomDjProjet/sitel 
User: 
Pass : 



1 . Double-cliquez sur la reference pour lancer le chargement. Une nouvelle fenetre apparait 
(voir Figure 10.14). 

2. Pour definir un dossier cible et y importer la classe, cliquez sur le lien "svn checkout". 
Une fenetre de selection de dossier apparait. 

3. Selectionnez le repertoire de destination, soit le dossier racine du site pour lequel vous 
importez la classe ou un dossier distinct utilise pour une gestion globale et native des 
classes, comme nous le detaillons plus loin dans ce chapitre (voir Figure 10.15). 

4. Validez pour activer directement le chargement des fichiers. Le chargement s'effectue 
jusqu'a ce que la barre de chargement situee en has de la fenetre s'arrete (voir 
Figure 10.16). 
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Figure 10.14 

Activation du 
chargement. 
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5. Lorsque le chargement est termine, quittez 1' application. A l'interieur de votre dossier, 
la classe PaperVision a ete importee. Elle apparait sous la forme de deux repertoires : 
nochump et org (voir Figure 10.17). 

Vous pouvez maintenant l'appeler directement depuis un document Flash ou l'integrer a 
l'API de Flash. 
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Figure 10.17 
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Integrer la classe PaperVision a Flash 

Vous pouvez placer la classe PaperVision, dans Flash, selon deux methodes. Soit, vous 
integrez le chemin de la classe dans le moteur de Flash pour la rendre accessible a partir de 
tout nouveau document. Soit vous la copiez ponctuellement et manuellement dans chaque 
nouveau projet. 

Integration native 

Lorsque vous integrez une classe nativement dans Flash, vous ne devez plus, par la suite, 
modifier l'emplacement du repertoire appele en reference. Aussi, nous vous conseillons de 
bien choisir son emplacement avant de proceder a la liaison : 

1. Par exemple, dans le dossier Flash du repertoire Applications de votre systeme (ou dans 
Program files pour Windows), creez un nouveau repertoire et nommez-le "Classes- 
Persos". 

2. Dans ce nouveau dossier, creez un repertoire et intitulez-le a present "papervision". 

3. Copiez-y integralement les dossiers que nous venons de telecharger ("org" et 
"nochump"). Attention toutefois, pour ne pas perdre la connexion avec Tortoise, prefe- 
rez cibler directement ce nouveau repertoire lors du telechargement de la classe. 

4. Revenez dans Flash. 

5. Pour integrer la classe nativement, dans Flash, affichez les preferences (Cmd+U sur 
Mac ou Ctrl+U sur Windows). 

6. Dans la categorie ActionScript, cliquez sur le bouton Parametres d' ActionScript 3. 
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Dans la boite de dialogue, trois zones de definition de chemin apparaissent. La premiere 
zone concerne 1' integration de classes natives (les trois zones sont confondues dans les 
anciennes versions de logiciel). 

Pour la classe PaperVision, le dossier intitule "org" contient l'ensemble des elements 
requis. Plus precisement, c'est le dossier "papervision3d", contenu dans le dossier "org", 
contenu a son tour dans "papervision", qui devra plus tard etre invoque par ActionScript. 

1 . Dans la fenetre de dialogue de Flash, a droite, cliquez sur le bouton de selection de dos- 
sier. Puis, selectionnez le repertoire "papervision" que nous venons de creer. En vali- 
dant, le chemin de liaison apparait dans la liste des classes integrees (voir Figure 10.18). 



Figure 10.18 

Fenetre d'inte- 
gration des 
classes natives 
dans Flash CS4. 
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2. Validez en refermant toutes les fenetres. La classe est desormais integree nativement 
dans 1' application et disponible pour tous les nouveaux documents. 

3. Relancez de preference 1' application pour garantir la prise en compte de ces nouveaux 
elements. 

Integration ponctuelle 

Vous pouvez aussi placer ponctuellement la classe dans chaque projet pour lequel elle est 
requise. II n'est done, dans ce cas, pas necessaire de l'integrer nativement comme vu a la 
section precedente : 

1. Copiez le repertoire "org" que nous venons de telecharger. 

2. Collez ce repertoire directement a la racine de votre site. 
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La classe est prete a etre utilisee pour les documents Flash places uniquement a la racine de 
ce dossier. Vous pouvez commencer a realiser des interfaces avec des objets 3D. 



A retenir 

■ PaperVision est une classe externalisee qu'il faut telecharger avant de pouvoir I'exploiter. Des utili- 
taires permettent de charger cette classe dynamiquement : Tortoise SVN pour Windows et SVNX 
pour Mac OS X. 

■ II est possible d'integrer une liaison native de Flash avec avec PaperVision, ou toute autre classe 
en modifiant les parametres d'ActionScript 3, depuis les preferences du logiciel. II faut pour cela 
cibler le repertoire qui les contient depuis la fenetre de liaison de classes. 

■ Si vous n'integrez pas les classes nativement, vous devez les copier, a chaque utilisation, au meme 
niveau d'arborescence que le document qui y fait reference. 

■ Les classes sont compilees dans le SWF a la publication. II n'est pas necessaire de les placer sur le 
serveur d'hebergement. 



Modeliser en 3D pour Flash et PaperVision 

Avant d'importer dans Flash des objets 3D reels, grace a la classe PaperVision, vous devez 
naturellement disposer de ces objets. Vous pouvez les realiser a partir de logiciels profes- 
sionnels ou gratuits. Nous presentons ici differentes solutions pour rendre les creations 3D 
compatibles avec Flash et PaperVision. Nous proposons notamment l'outil Google Sketchup, 
logiciel 3D libre, compatible avec Flash et PaperVision. 

Exporter la 3D avec les logiciels standard 

Tous les logiciels 3D sont compatibles Flash et PaperVision des lors qu'ils peuvent expor- 
ter au format DAE (Maya, 3DS Max, Cinema 4D, Blender, Swift,...). Pour de nombreux 
logiciels toutefois, le plug-in Collada est requis. II est disponible sur Internet. Pour chaque 
logiciel, reportez-vous au lien en rapport : 

• Blender requiert un plug-in. Laide a 1' installation de Collada pour Blender est disponi- 
ble a cette adresse : http://colladablender.illusoft.com/cms/content/blogcategory/25/ 
29/. 

• Swift 3D gere nativement l'export au format DAE. Consultez le site suivant pour en 
savoir plus sur Swift 3D : http://www.erain.com/products/swift3d/?erain=v6pr. 

• Cinema 4D Rl 1 accepte egalement le format DAE de Collada : http://www.maxon.net/ 
products/cinema-4d.html. 

• 3DSMax et Maya disposent d'un plug-in Collada specifique. Retrouvez-le a : http:// 
sourceforge.net/projects/colladamaya/. 

• Une aide plus general e sur 1' exportation de fichiers 3D avec Collada, pour tous logi- 
ciels 3D, est disponible a l'adresse : http://www.australopitech.com/883-collada- 
papervision3d. 



LE Campus 



ActionScript 3 ET motion design 



Limite de taille des fichiers 3D. La gestion de la 3D dans Flash avec PaperVision suppose que 
les fichiers puissent etre consultes par tout type d'utilisateur et avec un chargement le plus rapide pos- 
sible. II est recommande d'eviter de depasser les scenes 3D composees de plus de 1 500 a 3 000 
polygones. Au-dela, veillez a bien organiser le chargement du contenu par etapes successives pour 
eviter un chargement trap long, et eviter que le moteur de rendu ne peine a calculer entierement le 
volume importe (presence de trous, points qui decrochent, etc.). 

Exporter la 3D avec Google Sketchup 

Google Sketchup est un logiciel de modelisation 3D, gratuit, si Ton s'en tient a une version 
basique. Cet outil initialement developpe pour promouvoir la technologie GoogleEarth, 
offre une solution accessible et simple a utiliser pour creer des objets 3D pour l'environne- 
ment de Flash avec PaperVision, d'autant que Sketchup est tres bien documente - et en 
francais. Google propose aussi une banque d'objets 3D deja modelises et libres de droits, 
simples a charger, pour un usage toutefois non commercial. 

Les conditions d'utilisation de la banque d'objets 3D Google Sketchup sont disponibles a cette 
adresse : http://sketchup.google.com/intl/fr/3dwh/tos.html. 

Pour etre importes dans Flash, les objets 3D de Google doivent etre exportes au format 
DAE. Mais, Sketchup ne permet d' exporter qu'aux formats KMZ (optimise) ou SKP (format 
natif). 

Afin d'exporter un objet 3D Sketchup pour Flash, il suffit de le publier au format KMZ et de 
modifier son extension . kmz en . zip. Le dossier compresse obtenu contient le fichier du 
modele 3D au format DAE et un fichier XML de metadonnees. Seul le fichier DAE et les 
textures eventuellement associees sont requis. 

Dans cette section, nous presentons comment recuperer un objet 3D de la banque d'objets 
de Google Sketchup pour le convertir du format natif Sketchup en DAE pour Flash et 
PaperVision. 

Pour acceder directement a une bibliotheque d'objets 3D KMZ, sans utiliser Sketchup, reportez-vous 
a I'adresse : http://sketchup.google.com/3dwarehouse/. 

Pour convertir des fichiers 3D natifs de Google dans un format compatible Flash, procedez 
comme suit : 

1. Telechargez la version gratuite de Sketchup a: http://sketchup.google.com/intl/fr/ 
download/gsu.html . 

2. Validez toutes les etapes de l'installation. 

3. Puis lancez 1' application. Au demarrage, Sketchup affiche un ecran avec differentes 
aides de grande qualite (voir Figure 10.19). 

4. Cliquez directement sur Commencer a utiliser Sketchup. Une scene 3D s'ouvre (voir 
Figure 10.20). 
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Figure 10.20 

Nouvelle scene 
dans Sketchup. 
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5. En haut et a droite de la fenetre, cliquez sur le bouton Telecharger des modeles (voir 
Figure 10.20). Une fenetre de navigateur s'ouvre sur la page de la banque d'objets 3D 
de Google. 

6. Saisissez une requete. Par exemple, sofa ou Sessel Couch Divan. Puis validez. Vous 
accedez a une liste d'objets. 
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7. Selectionnez celui de votre choix en le cliquant. Puis, dans la fiche descriptive de 1' arti- 
cle, en bas de 1' image de presentation, cliquez sur le lien Telecharger le modele (voir 
Figure 10.21). 



Figure 10.21 

Telecharger le 
modele. 



Google banque d'images 3D 

Furniture Mobel > Sessel Couch Divan 

Sessel Couch Divan 




8. Un message demande de confirmer le chargement du modele dans le nouveau document 
Sketchup. 

9. Confirmez et l'objet apparait instantanement dans la scene. Vous pouvez l'exporter 
(voir Figure 10.22). 



Figure 10.22 

Modele importe. 
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10. Si l'objet n'apparait pas directement au centre de la scene, zoomez en arriere avec la 
roulette de la souris ou avec l'outil Loupe. 

11. Repositionnez l'objet vers le point d'origine de la scene, a l'aide de l'outil de depla- 
cement (Outil Deplacer/Copier en forme de 4 fleches cardinales rouges). 

12. Supprimez le personnage de la scene en cliquant dessus et en faisant retour ou Suppr, au 
clavier. 

13. Faites Fichier > Exporter > Modele 3D. Nommez le document "sofa.kmz". 
Une fenetre affiche des informations sur les proprietes de l'objet. 

14. Refermez la fenetre pour continuer. Vous pouvez conserver eventuellement le document 
au format natif pour le modifier si necessaire en faisant Fichier > Enregistrer, au format 
SKP. 

15. Puis, quittez Sketchup. 



Si vous souhaitez pouvoir identifier des groupes d'objets pour PaperVision, en vue de modifier 
depuis PaperVision les teintes des composantes de forme des objets, utilisez la fenetre Structure de 
Sketchup. Puis renommez chaque composante de l'objet 3D affiche dans cette liste. Aidez-vous even- 
tuellement de I'option Creer un groupe, disponible par un clic-droit sur les formes graphiques composant 
les objets dans la scene. 



Une fois le document exporte au format MKZ, vous pouvez en extraire le fichier Collada 
DAE. 

Modifiez l'extension du fichier "sofa.kmz" en "sofa. zip". Confirmez eventuellement la boite 
de dialogue d' avertissement qui apparait. Puis, decompressez le fichier obtenu. Un dossier 
qui porte le meme nom que le document apparait. A l'interieur, nous distinguons le fichier 
DAE isole dans un repertoire nomme "models" (voir Figure 10.23). 



Figure 10.23 
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Nous pouvons conserver la structure des sous-dossiers. II n'en sera que plus simple pour 
gerer les eventuelles modifications par la suite. Le fichier DAE est maintenant exploitable 
directement dans Flash, en ActionScript. 

Pour en savoir plus sur Sketchup, consultez cette adresse : http://sketchup.google.com/intl/fr. 

Pour acceder a une documentation detaillee, en texte et sous la forme de tutoriels video sur la mode- 
lisation avec le logiciel Sketchup, consultez les adresses suivantes : 

■ http://sketchup.google.com/intl/fr/training/videos.html. 

■ http://slcetchup.google.com/support/. 

A retenir 

■ Vous pouvez exporter des objets 3D pour Flash et PaperVision si celui-ci est au format Collada 
DAE. 

■ Google Sketchup est une application 3D libre qui donne acces a des modeles 3D dans un format 
compatible avec Flash et PaperVision. 

■ Pour convertir un fichier KMZ en fichier DAE, il suffit de remplacer I'extension . kmz en . zip et 
decompresser le fichier obtenu. 

Programmer les mouvements de camera 3D 

Au cours de cette section, nous utilisons un modele d'objet 3D de reference Sessel Couch 
Divan, telecharge depuis la banque d'objets 3D de Google. Nous allons voir comment ajou- 
ter dans le scenario de 1' interface auteur de Flash, les commandes ActionScript 3D de 
PaperVision pour animer une camera et l'objet 3D. 

Dans cet exemple, nous utilisons des transitions de type TweenMax que nous appliquons a 
l'objet Camera en vue de realiser plusieurs dispositifs de presentation. 

Nous commencons par creer une animation autonome de la camera 3D pour approcher 
l'objet et donner l'illusion que c'est lui qui s'approche de l'ecran. Ensuite, nous associons 
ces actions a une occurrence de bouton pour effectuer un zoom de camera, afin de permettre 
a l'utilisateur de controler lui-meme le mouvement de la camera. Nous ajoutons enfin un 
comportement a l'objet 3D, afin de le faire evoluer devant la camera, une fois celle-ci fixee. 

Pour cela, nous utilisons la classe PaperVision accessible depuis Flash. 

Exemple; • ch 1 0_3DPaperVision_ 1 fla 

Dans le document "chlO_3DpaperVision_l.fla", nous pouvons voir un bouton en bas et a 
droite, en forme de loupe, qui est associe a une action sur camera. Au-dessous, un habillage 
gris materialise la limite de la zone d'affichage reservee pour la 3D telle que definie en 
ActionScript. Une fois publie, le sofa part du fond de la scene et arrive progressivement au 
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premier plan, tout en tournant sur lui-meme. En cliquant sur le bouton Loupe, la camera se 
rapproche un peu plus encore a chaque clic (voir Figures 10.24 a 10.26). 



Figure 10.24 

Apercu du 
document publie 
au debut de 
I'animation. 




Figure 10.25 

Apercu du 
document publie 
au milieu de 
I'animation. 
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Figure 10.26 

Apercu du 
document 
publie a la fin de 
I'animation. 




Figure 10.27 

Scenario de la 
scene principale. 
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Dans la fenetre de scenario de la scene principale, au-dessus du caique f ond_mc, nous trou- 
vons le bouton loupe_btn, l'habillage gris et le caique Actions (voir Figure 10.27). Dans 
le caique Actions, nous pouvons lire le code suivant : 



// 

import gs.TweenMax; 
import gs. easing.*; 



initialisation 



import org. papervision3d . view.*; 

import org . papervision3d . cameras . * ; 

import org . papervision3d . scenes . * ; 

import org . papervision3d . render. * ; 

import org . papervision3d .obj ects . primitives . * 

import org . papervision3d . events . * ; 

import org . papervision3d . materials . * ; 

import org . papervision3d . obj ects .parsers . DAE ; 

var espace:Viewport3D; 
var rendu:BasicRenderEngine; 
var scene : Scene3D; 
var camera:Camera3D; 



var obj etDAE : DAE = new DAE ( ) ; 
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objetDAE.load( "objets3D/sofa/models/sofa.dae" ) ; 

// actions 

initialisation ( ) ; 

function initialisation ( ) { 

espace=new Viewport3D( stage . stageWidth , stage . stageHeight- 1 10); 

addChild (espace) ; 

rendu = new BasicRenderEngine( ) ; 

scene = new Scene3D(); 

camera = new Camera3D(); 

// 

objetDAE. rotationX=0; 
objetDAE. rotationY=-90; 
objetDAE. rotationZ=0; 
objetDAE. x=0; 
objetDAE. y=0; 
objetDAE. z=0; 
camera. y=15; 
// 

activerAff ichage3D( ) ; 

} 

function activerAff ichage3D( ) { 
scene. addChild(objetDAE) ; 

TweenMax.to(camera, 5, {z:camera.z+900, delay:0, ease:Strong.easeInOut}) ; 
addEventListener(Event . ENTER_FRAME, enBoucle) ; 

} 

function enBoucle(evt:Event) { 
objetDAE. yaw(-1 ) ; 

rendu. renderScene(scene, camera, espace); 

} 

//modifier un objet 3D 

loupe_btn . addEventListener (MouseEvent .CLICK, deplacerObj etDAE) ; 
function deplacerObjetDAE(evt:MouseEvent) { 

TweenMax. to(camera, 5, {zoom:camera.zoom+100, delay:0, 

* ease:Strong.easeOut}) ; 

} 

Dans la premiere partie de ce code, nous commencons par importer l'ensemble des sous- 
classes de la classe PaperVision. Nous ciblons, pour chacune d'entre elles, le dossier 
"org", comme point de reference de cet ensemble. Du fait que nous avons integre le chemin 
de classes dans les preferences de 1' application, nous specifions ici le dossier org situe dans 
le repertoire "ClassesPersos" que nous avons prealablement cree. 

Les classes importees sont utilisees pour les transitions TweenMax : 

// initialisation 

import gs. TweenMax; 
import gs. easing.*; 

Puis, viennent celles de PaperVision : 

• import org . papervision3d . view. * ; : la classe view permet de gerer l'environ- 
nement 3D. 
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• import org. papervision3d. cameras.*; : la classe cameras permet de creer une 
camera. 

• import org. papervision3d. scenes.*; : la classe scenes permet de creer la scene 
que constitue l'espace 3D. 

• import org. papervision3d. render.*; : la classe render calcule l'affichage 3D. 

• import org. papervision3d. objects. primitives.*; : la classe primitives, non 
utilisee dans ce document, nous permettra de creer plus tard des formes primitives, 
telles que spheres, cylindres, cones, plans, ou cubes. 

• import org. papervision3d. events.*; : la classe events autorise l'interactivite 
avec les objets de la scene 3D. 

• import org. papervision3d. materials.*; : la classe materials permet d'appli- 
quer des textures a partir d'images a des formes 3D. Nous l'utilisons egalement plus 
loin dans ce chapitre. 

• import org. papervision3d . objects. parsers. DAE; : enfin, la classe DAE autorise 
la gestion d'objets 3D importes au format DAE. 

D'autres classes sont disponibles. Vous pouvez les identifier en parcourant le contenu du 
dossier org. 

A la suite, nous definissons quelques variables qui caracterisent les types d'objets requis 
pour la construction de l'univers en trois dimensions : 

var espace : Viewport3D; 
var rendu : BasicRenderEngine; 
var scene :Scene3D; 
var camera:Camera3D; 

Viewport3D definit la surface affichee a l'ecran. Plus loin dans le code, cette variable recoit 
en parametre les dimensions de la zone d'affichage en pixels. L'objet basicRenderEngine 
est le moteur de rendu. L'objet scene3D constitue le volume a l'interieur duquel nous pla- 
gons tous les elements en 3D. L'objet Camera3D enfin designe l'ceil du spectateur, la 
camera. 

Plus bas, nous creons un nouvel objet DAE qui charge le fichier 3D dans l'interface. Nous 
indiquons le chemin qui part du document Flash vers le fichier, a l'interieur de la structure 
de dossier KMZ que nous avons decompresse : 

var objetDAE:DAE = new DAE ( ) ; 

objetDAE.load( "objets3D/sofa/models/sofa.dae" ) ; 

La deuxieme partie du code execute l'interface 3D. Les actions sont rassemblees dans des 
fonctions afin de permettre une gestion de l'affichage controlee dans le temps. 

// actions 

initialisation ( ) ; 

function initialisation ( ) { 

espace=new Viewport3D( stage. stageWidth , stage . stageHeight-1 10) ; 

addChild (espace) ; 

rendu = new BasicRenderEngine( ) ; 
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scene = new Scene3D(); 
camera = new Camera3D( ) ; 

// 

obj etDAE.rotationX=0; 

objetDAE.rotationY=-90; 

obj etDAE.rotationZ=0; 

objetDAE.x=0; 

objetDAE.y=0; 

objetDAE.z=0; 

camera. y=15; 

// 

activerAff ichage3D( ) ; 

} 

La premiere instruction de la premiere fonction definit la zone d'affichage du rendu. Nous 
specifions ici une largeur equivalente a la largeur de la scene du document Flash 
(stage . stageWidth) et une hauteur de 110 pixels de moins que la hauteur du document 
(stage . stageHeight- 1 1 0). La hauteur est reduite afin de preserver la visibilite des contro- 
les de navigation que nous avons places sur la scene (outil Loupe, entre autres). Gardez a 
1' esprit que plus votre surface de rendu est importante, plus les ressources de la machine 
client seront sollicitees. 

La construction d'une interface 3D implique l'affichage de deux types d'objets. D'abord, 
nous affichons la zone de rendu avec ici l'objet espace dont nous venons de definir les 
dimensions. Plus loin, nous affichons les objets de la scene en 3D (DAE et primitives even- 
tuelles). Lobjet espace agit comme une fenetre a travers laquelle on peut observer l'objet 
scene en 3D. Lobjet scene ne definit en rien l'affichage, il n'est qu'un conteneur, pas un 
objet d'affichage. 

Cette distinction est importante, car si la zone de rendu peut etre geree comme tout contenu 
depuis la liste d'affichage. La scene, elle, ne peut etre invoquee directement, pour etre redis- 
tribute au-dessous d'un autre objet par exemple. Pour permettre de placer des symboles de 
la scene Flash au-dessus de la scene 3D, nous devons affecter le premier objet d' affichage, 
l'objet espace et non l'objet scene. Ainsi, si nous souhaitons que notre creation 3D s'affi- 
che a l'arriere-plan du bandeau gris du document Flash, par exemple, nous specifions add- 
ChildAt(espace, 1 ) au lieu de simplement addChild(espace). Les objets 3D sont 
ajoutes a la scene avec egalement la methode addChild, mais cela ne les inclut pas pour 
autant dans la liste d'affichage globale. De cette maniere, l'objet scene induit une obstruction 
semantique entre le contenu Flash et le contenu gere par PaperVision. 



II est egalement possible de placer un symbole par-dessus un objet 3D en conservant toutefois l'objet 
espace au sommet de la liste d'affichage. Pour cela, il suffit d'importer le symbole a ajouter en tant 
que texture dans un objet primitif de type Plane, par exemple, puis de gerer la position de cette pri- 
mitive sur I'axe des Z avec un positionnement frontal par rapport a la camera. Reportez-vous a la sec- 
tion "Interactivite avec les touches du clavier" pour en savoir plus sur la construction des primitives. 



Une fois la zone d'affichage definie, nous l'ajoutons done a la liste d'affichage classique 
avec addChild(espace). 
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A la suite, nous materialisons les objets pour lesquels nous avons cree les variables en 
amont, les variables : 

rendu = new BasicRenderEngine( ) ; 
scene = new Scene3D(); 
camera = new Camera3D(); 

Puis, nous modifions les proprietes des objets avant de les afficher, pour les caler dans 
renvironnement 3D : 

ob j etDAE . rotationX=0 ; 
objetDAE. rotationY=-90; 
ob j etDAE . rotationZ=0 ; 
objetDAE. x=0; 
objetDAE. y=0; 
objetDAE. z=0; 
camera. y=15; 

Nous ajustons les rotations de l'objet 3D afin qu'il apparaisse de face a la camera (rota- 
tionY=-90). Puis, nous modifions legerement la position verticale de la camera pour recentrer 
egalement l'objet dans la scene (camera . y=1 5). 

En dessous, nous poursuivons avec l'appel d'une fonction qui va activer l'affichage 3D des 
objets de la scene, et engager les animations des contenus alors prets a etre animes : 

function activerAf f ichage3D( ) { 
scene. addChild(objetDAE) ; 

TweenMax.to(camera, 5, {z:camera.z+900, delay:0, ease:Strong.easeInOut}) ; 
addEventListener(Event.ENTER_FRAME, enBoucle) ; 

} 

function enBoucle(evt:Event) { 
obj etDAE. yaw(-1 ) ; 

rendu. renderScene(scene, camera, espace); 

} 

La deuxieme instruction de cette fonction active une interpolation de type TweenMax qui 
anime la propriete z de l'objet camera de maniere a creer un travelling jusqu' a atteindre 
l'objet DAE (camera . z+=900). 

Plus bas, un ecouteur, associe a un gestionnaire de type ENTER_FRAME, active le calcul du 
rendu de la scene 3D (rendu. renderScene(scene, camera, espace)). Les trois objets 
scene, camera et espace sont passes en parametre. 

Une derniere instruction ajoute un effet d'animation sur l'objet DAE. Cette instruction 
adopte une syntaxe propre a l'environnement PaperVision et equivaut a une rotation en Y 
d'un pas d' incrementation de 1° a chaque image. La methode employee est yaw et donne : 
obj etDAE. yaw(-1 ). Nous abordons d'autres methodes de ce type dans la section suivante. 

Le programme s'acheve sur l'ajout d'un comportement sur le bouton Loupe. En cliquant 
dessus, nous lancons une nouvelle interpolation qui anime la camera avec une autre pro- 
priete : zoom. 

//modifier un objet 3D 

loupe_btn . addEventListener (MouseEvent .CLICK, deplacerObj etDAE) ; 
function deplacerObjetDAE(evt:MouseEvent) { 

TweenMax. to(camera, 5, {zoom: camera. zoom+1 00, delay:0, 
ease:Strong.easeOut}) ; 

} 
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Les proprietes zoom et z se differencie par un deplacement physique de la camera pour z, 
tandis que zoom ne fait qu'agrandir 1' image. Ainsi, la propriete zoom permet de se rapprocher de 
l'objet 3D sans jamais le traverser, alors que z passerait a travers. 




La sous-classe Camera3D est parfois aussi appelee FreeCamera3D (dans d'anciennes versions de 
PaperVision). Selon la version du package que vous utilisez, verifiez que le nom de votre classe 
Camera presente dans le code ActionScript de votre document correspond bien au nom du fichier 
.as disponible dans les sous-dossiers de la classe PaperVision. 

II peut arriver, selon le poids du fichier, que Flash annule le rendu a la publication. Le calcul du rendu 
est alors peut-etre trap long pour Flash. Pour corriger ce probleme, allez dans les parametres de publi- 
cation, et sous le champ mot de passe, allongez la duree limite d'execution du script avant laquelle 
Flash annule le rendu. 



A retenir 

■ II est possible d'animer facilement la camera dans un environnement 3D pour creer des travellings, 
des zooms et des trajectoires, grace a la combinaison de proprietes 3D et d'interpolations de type 
TweenMax. 

■ Le contenu d'une scene 3D n'est pas accessible directement depuis la liste d'affichage, mais son 
enveloppe oui. II est done possible de placer les animations 3D entre differents objets dans la scene 
du document Flash. 

■ Les commandes ActionScript de PaperVision peuvent etre redigees directement depuis la fenetre 
de scenario. 



Le zoom se distingue d'un deplacement en Z, en cela qu'il ne traverse jamais l'objet, au 
contraire de Z. 



Programmer les mouvements d objets 3D 

Dans cette section, nous allons aj outer des animations qui permettent de manipuler directement 
les objets 3D de format DAE, importes dans Flash. 



Exemples > chl 0_3DPaperVision_2.fla 

Le document "chlO_3DPaperVision_2.fla" est base sur l'exemple precedent. Sur la scene 
principale, en plus de la bande grise et du bouton Loupe, figure un nouveau bouton nomme 
sof a_btn (voir Figure 10.28). Ce bouton est destine a recevoir des instructions d'animation 
de l'objet 3D. 

En publiant le document (voir Figure 10.29), lorsque le sofa est au premier plan, le bouton 
associe a l'objet le fait pivoter sur lui-meme. 
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Figure 10.28 

Apercu du 
document publie. 




Figure 10.29 

Scenario de la 
scene principale. 
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Le caique actions affiche le code suivant : 



// 

import gs.TweenMax; 
import gs. easing.*; 



initialisation 



import org. papervision3d . view.*; 

import org . papervision3d . cameras . * ; 

import org . papervision3d . scenes . * ; 

import org . papervision3d . render . * ; 

import org . papervision3d . obj ects . primitives . * ; 

import org . papervision3d . events . * ; 

import org . papervision3d . materials . * ; 

import org . papervision3d . obj ects .parsers . DAE ; 



var espace:Viewport3D; 
var rendu:BasicRenderEngine; 
var scene : Scene3D; 
var camera:Camera3D; 



var obj etDAE : DAE = new DAE ( ) ; 

objetDAE.load( "objets3D/sofa/models/sofa.dae" ) ; 
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// actions 

initialisation ( ) ; 

function initialisation ( ) { 

espace=new Viewport3D( stage . stageWidth , stage . stageHeight- 1 10); 

addChild (espace) ; 

rendu = new BasicRenderEngine( ) ; 

scene = new Scene3D(); 

camera = new Camera3D(); 

// 

objetDAE. rotationX=0; 
objetDAE. rotationY=-90; 
objetDAE. rotationZ=0; 
objetDAE. x=0; 
objetDAE. y=0; 
objetDAE. z=0; 
camera. y=15; 
camera. rotationY=-10; 
// 

activerAff ichage3D( ) ; 

} 

function activerAff ichage3D( ) { 
scene . addChild (obj etDAE) ; 

TweenMax.to(camera, 5, {z:camera.z+900, delay:0, ease:Strong.easeInOut}) ; 
addEventListener(Event . ENTER_FRAME, enBoucle) ; 

} 

// 

function enBoucle(evt:Event) { 
obj etDAE. yaw(-1 ) ; 
objetDAE. roll (-1); 
objetDAE. pitch(-1 ) ; 

rendu. renderScene(scene, camera, espace); 

} 

//modifier un objet 3D 

loupe_btn . addEventListener (MouseEvent .CLICK, deplacerObj etDAE) ; 
function deplacerObjetDAE(evt:MouseEvent) { 

TweenMax. to (camera, 5, {zoom: camera. zoom+1 00, delay:0, ease:Strong.easeOut}) ; 

} 

//Animer le sofa 

sof a_btn . addEventListener (MouseEvent .CLICK, animerCamera) ; 
function animerCamera(evt :MouseEvent) { 

TweenMax. to(objetDAE, 5, {rotationY:objetDAE. rotationY+45, rotationX: 

obj etDAE . rotationX+45, rotationZ: obj etDAE. rotationZ+45, delay : 0, 

ease:Strong.easeInOut}) ; 

} 
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Dans cet exemple, nous animons l'objet DAE en le ciblant par le nom d'objet qui lui a ete 
attribue (ob j etDAE), des la declaration des differents objets en debut de code. 

L' animation d'un objet 3D se construit de la meme maniere que l'animation d'une camera. 
Les transitions TweenMax permettent de repositionner l'objet dans l'espace, de le faire pivoter 
en rotation sur les axes X, Y et Z. 

Nous utilisons aussi d'autres methodes, dont la methode yaw( ), deja evoquee a la section 
precedente : 

obj etDAE. yaw(-1 ) ; 

La methode yaw( ) execute une rotation laterale surY d'une valeur qui correspond au chiffre 
renseigne en parametre. L'objet tourne au sol sur lui-meme comme un tourniquet, de degre 
en degre : 

ob] etDAE. roll (-1 ) ; 

La methode roll( ) execute une rotation verticale sur X d'une valeur qui correspond au 
chiffre renseigne en parametre. L'objet tourne ici sur lui-meme, mais l'axe de rotation est 
parallele a l'ecran : 

objetDAE.pitch(-1 ) ; 

La methode pitch ( ) execute une rotation frontale en Z d'une valeur correspondant au chif- 
fre renseigne en parametre. L'objet tourne sur lui-meme, comme les aiguilles d'une montre. 

Ces trois methodes peuvent etre appliquees independamment les unes des autres et cumu- 
lees a des rotations X, Y et Z. Dans notre exemple, les trois methodes donnent un effet de 
rotation hybride qui fait evoluer l'objet dans toutes les directions simultanement. Vous pouvez 
les desactiver une par une pour observer leur comportement individuel. 

En fin de programme, un ecouteur est attache au bouton sof a_btn et effectue une interpo- 
lation de type TweenMax en modifiant les parametres de rotation X, Y et Z de l'objet DAE. 

Optimiser un site 3D. Certains sites, bien que tres spectaculaires, utilisent le meme principe de 
navigation spatiale 3D avec des transitions de type TweenMax ou Caurina. Le site System Bolaget 
Kampanj (suedois) en est le parfait exemple. II affiche au premier plan un village modelise en 3D. A 
I'arriere-plan, sur la scene principale du document Flash, des panoramiques d'images PNG sont ani- 
mes. Pour garantir la fluidite de I'effet 3D, les PNG du decor sont isoles dans des clips distincts et ani- 
mes avec un coefficient d'acceleration (voir Chapitre 1 ). La superposition de la scene 3D et 2D donne 
rillusion d'un ensemble entierement 3D. En isolant une partie du decor sous la forme d'images fixes, 
plutot que de tout realiser en 3D, nous optimisons considerablement le poids d'un projet. Vous pou- 
vez consulter le site referent a I'adresse suivante : http://www.systembolagetkampanj.se/forskar- 
rapport/. 

A retenir 

■ II est possible d'animer les proprietes 3D d'un objet DAE importe dans le document Flash, pour le 
faire evoluer, se deplacer ou pivoter, sur action de I'utilisateur. par exemple. 

■ Des methodes d'animation (roll, yaw et pitch) permettent de simplifier les mouvements de ces 
objets dans l'espace 3D et peuvent etre cumulees avec l'animation d'autres proprietes. 
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Interactivity avec les touches du clavier 

La representation d'objets en volume implique la necessite de controler la navigation dans 
l'espace. Dans cette section, nous allons voir comment reconstituer un decor virtuel a partir 
de formes primitives texturees, puis comment y naviguer a l'aide des commandes du cla- 
vier. Pour cela, nous devons determiner la possibilite d'effectuer une combinaison de tou- 
ches (Maj+Fleche droite, par exemple). Enfin, nous modifierons le sens de defilement des 
fleches du clavier, en fonction de 1' orientation de la camera dans le decor. Pour guider l'uti- 
lisateur, une boussole est placee sur la scene du document Flash et donne 1' orientation de la 
camera dans l'espace 3D. 



Exemples > ch 1 0_3DPaperVision_3.fla 

Dans le document "chlO_3DPaperVision_3.fla", sur la scene principale, au-dessus du cai- 
que f ond_mc et de l'habillage gris, apparait une boussole. A l'interieur du symbole qui le 
compose, deux clips sont repartis vers les caiques et possedent leur nom d'occurrence. 

En publiant le document, des images tapissent des pans de murs virtuels. En activant les fle- 
ches du clavier, vous avancez, reculez ou vous deplacez a droite et a gauche. En appuyant 
simultanement sur majuscule et la touche fleche laterale, vous effectuez une rotation a 90° 
et pouvez reprendre une circulation vers l'avant en appuyant de nouveau sur la fleche du 
haut (voir Figures 10.30 et 10.31). L' aiguille de la boussole tourne en fonction de l'orientation 
definie pour la camera. 



Figure 10.30 

Apercu du docu- 
ment publie. 
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Dans la fenetre de scenario, l'habillage gris et la boussole apparaissent (voir Figure 10.32). 



Figure 10.32 

Apercu du 
scenario de la 
scene principale. 
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Dans le caique Actions, nous pouvons lire le code suivant 

// initialisation 

import gs.TweenMax; 
import gs. easing.*; 

import org. papervision3d . view.*; 

import org . papervision3d . cameras . * ; 

import org . papervision3d . scenes . * ; 

import org . papervision3d . render . * ; 

import org . papervision3d .obj ects . primitives . * ; 

import org . papervision3d . events . * ; 

import org . papervision3d . materials . * ; 

import org . papervision3d . obj ects .parsers . DAE ; 

var espace:Viewport3D; 
var rendu:BasicRenderEngine; 
var scene : Scene3D; 
var camera:Camera3D; 



var plan0:Plane=new Plane(new BitmapFileMaterial( "images/galerie/photoO. jpg" ) ,400,200) ; 
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var planl :Plane=new Plane (new BitmapFileMaterial( 
var plan2:Plane=new Plane (new BitmapFileMaterial( 
var plan3:Plane=new Plane (new BitmapFileMaterial( 
var plan4:Plane=new Plane (new BitmapFileMaterial( 
var plan5:Plane=new Plane (new BitmapFileMaterial( 



images/galerie/ photol . j pg " ) , 400 , 200 ) 
images/galerie/ photo2 . j pg " ) , 400 , 200 ) 
images /gale rie / photo3 . j pg " ) , 400 , 200 ) 
images /gale rie / photo4 . j pg " ) , 400 , 200 ) 
images/galerie/photo5. jpg" ) ,400,200) 



// actions 

initialisation ( ) ; 
function initialisation ( ) { 
activerPapervision ( ) ; 

// 

camera. y=10; 

plan© . rotationY=0 ; 

plan0.x=0; 

planl . rotationY=90; 

planl .x=2000; 

plan2 . rotationY=-45; 

plan2.x=500; 

plan3 . rotationY=45 ; 

plan3.x=1500; 

plan4 . rotationY=0 ; 

plan4.x=900; 

plans . rotationY=90; 

plan5.x=3000; 

// 

activerAf f ichage3d ( ) ; 



} 

// 
fu 



} 

fu 



nction activerPapervision ( ) { 
espace=new Viewport3D( stage . stageWidth , stage . stageHeight- 1 10) 
addChild (espace) ; 
rendu = new BasicRenderEngine( ) ; 
scene = new Scene3D(); 
camera = new Camera3D(); 

nction activerAf fichage3d ( ) { 
scene . addChild (planO) ; 
scene . addChild (planl ) : 
scene . addChild (plan2) : 
scene . addChild (plan3) : 
scene . addChild (plan4) : 
scene . addChild (plan5) ; 
addEventListener(Event . ENTER_FRAME, enBoucle) ; 

stage . addE vent Listener (Key boardEvent . KEYDOWN , navigationClavierDOWN) ; 

stage . addE vent Listener (Key boardEvent . KEY_UP, navigationClavierUP) ; 



} 

// 
fu 



nction enBoucle(evt:Event) { 
rendu. renderScene(scene, camera, espace) 



// controle clavier 

var sens : Number=0; 

var toucheBase:Number=0; 

var toucheSupplementaire : Number=0; 
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// 

function navigationClavierDOWN(evt:KeyboardEvent) { 

trace ("le code de la touche enfoncee est : "+evt . keyCode) 

// 

if (evt.keyCode==16) { 
toucheBase=1 6; 

} 

} 

function navigationClavierUP (evt:KeyboardEvent) { 

trace ("le code de la touche enfoncee est : "+evt.keyCode) 

trace ( "sens = "+sens) ; 

trace( "toucheBase = "+toucheBase) 

trace( "toucheSupplementaire = "+toucheSupplementaire) 

// 

if (toucheBase==16 && toucheSupplementaire==37) { 

TweenMax.to(camera, 1, {rotationY:camera. rotationY-90, delay :0, 

ease:Strong. easeOut}) ; 
toucheBase=999; 
toucheSupplementaire=999; 
sens-=90; 
if (sens<=-360) { 
sens=0; 

} 

} 

if (toucheBase==16 && toucheSupplementaire==39) { 

TweenMax.to(camera, 1, {rotationY:camera. rotationY+90, delay :0, 
* ease:Strong.easeOut}) ; 
toucheBase=999; 
toucheSupplementaire=999; 
sens+=90; 
if (sens>=360) { 
sens=0; 

} 

} 

// 

if (sens==0 | | sens==360) { 
if (evt.keyCode==37) { 

toucheSupplementaire=37; 

TweenMax.to(camera, 1, {x:camera.x-200, delay:0, ease : Strong. easeOut} ) ; 

} 

if (evt.keyCode==38) { 

toucheSupplementaire=38; 

TweenMax.to(camera, 1, {z:camera.z+200, delay:0, ease : Strong. easeOut} ) ; 

} 

if (evt.keyCode==39) { 

toucheSupplementaire=39; 

TweenMax.to(camera, 1, {x:camera.x+200, delay:0, ease : Strong. easeOut} ) ; 

} 

if (evt.keyCode==40) { 

toucheSupplementaire=40; 

TweenMax.to(camera, 1, {z:camera.z-200, delay:©, ease:Strong. easeOut}) ; 

} 

} 

// 

if (sens==90 | | sens==270) { 
if (evt.keyCode==37) { 

toucheSupplementaire=37; 

TweenMax.to(camera, 1, {z: camera. z+200, delay:0, ease:Strong. easeOut}) ; 

} 

if (evt.keyCode==38) { 

toucheSupplementaire=38; 
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TweenMax. to(camera, 1, {x: camera. x+200, delay :0, ease : Strong. easeOut} ) ; 

} 

if (evt.keyCode==39) { 

toucheSupplementaire=39; 

TweenMax.to(camera, 1, {z:camera.z-200, delay:0, ease : Strong. easeOut} ) ; 

} 

if (evt.keyCode==40) { 

toucheSupplementaire=40; 

TweenMax.to(camera, 1, {x:camera.x-200, delay:0, ease:Strong. easeOut}) ; 

} 

} 

// 

if (sens==-90 | | sens==-270) { 
if (evt.keyCode==37) { 

toucheSupplementaire=37; 

TweenMax.to(camera, 1, {z: camera. z-200, delay:0, ease:Strong. easeOut}) ; 

} 

if (evt.keyCode==38) { 

toucheSupplementaire=38; 

TweenMax.to(camera, 1, {x:camera.x-200, delay:0, ease:Strong. easeOut}) ; 

} 

if (evt.keyCode==39) { 

toucheSupplementaire=39; 

TweenMax. to (camera, 1, {z : camera . z+200, delay:0, 
ease:Strong. easeOut}) ; 

} 

if (evt.keyCode==40) { 

toucheSupplementaire=40; 

TweenMax. to (camera, 1, {x : camera . x+200, delay:©, 
ease:Strong. easeOut}) ; 

} 

} 

// 

if (sens==180 | | sens==-180) { 
if (evt.keyCode==37) { 

toucheSupplementaire=37; 

TweenMax. to(camera, 1, {x:camera.x-200, delay:0, ease : Strong. easeOut} ) ; 

} 

if (evt.keyCode==38) { 

toucheSupplementaire=38; 

TweenMax. to(camera, 1, {z:camera. z+200, delay:0, ease:Strong. easeOut}) ; 

} 

if (evt.keyCode==39) { 

toucheSupplementaire=39; 

TweenMax. to(camera, 1, {x:camera. x+200, delay :0, ease : Strong. easeOut} ) ; 

} 

if (evt.keyCode==40) { 

toucheSupplementaire=40; 

TweenMax. to(camera, 1, {z:camera. z-200, delay :0, ease : Strong. easeOut} ) ; 

} 

} 

// 

TweenMax. to(boussole_mc.fondBoussole_mc, 1, {rotation : -sens , delay:0, 
ease:Strong. easeOut}) ; 
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Dans ce programme, base sur les documents precedents, nous avons substitue l'objet DAE 
par des formes primitives de type Plane (plan) : 

var planO : Plane=new Plane(new 

BitmapFileMaterial( "images/galerie/photoO. jpg" ) ,400,200) ; 

En parametre de la methode new Plane () , nous ciblons 1' image que nous voulons afficher 
en tant que texture, puis, sa largeur et sa hauteur, qui sont exprimees en pixels. 

Les primitives de PaperVision. II existe plusieurs types de primitives disponibles dans Paper- 
Vision. Chaque objet peut recevoir une texture et posseder des dimensions libres si bien qu'une 
sphere ou un cylindre sont couramment employes pour creer des unlvers entiers (des ciels ou des 
panoramiques par exemple). Ainsi, pour creer une sphere de position x=0 et y=0, par exemple, vous 
inscrivez : 

var sphere:Sphere=new Sphere(new BitmapFileMaterial( "images/ciel. j pg" ) ,0, 0) ; 
Puis : 

scene . addChild (sphere) ; 

Vous pouvez eventuellement ajuster I'echelle des formes primitives avec la propriete scale. 

Sur le meme principe, la methode Plane ( ) genere une forme plate, un plan rectangulaire. Cube( ) 
designe un cube (voir aussi http://forum.hardware.fr/hfr/Programmation/Divers-6/cube-site- 
entrees-sujet_125429_1.htm). Cone(), cree un cone et Cylinder ( ) cree un cylindre. Pourledes- 
criptif detaille de construction de ces objets, avec des textures bitmaps, consultez I'adresse suivante : 
http://astrois.info/blog/flash/realiser-une-visionneuse-de-panorama-vr-en-as3. 

Plus loin, nous gerons d'abord l'emplacement des objets : 

plan0. rotationY=0; 
plan0.x=O; 

Puis, nous les ajoutons a la liste d'affichage : 

scene. addChild (plan0) ; 

Viennent ensuite les controles du clavier, actives par deux gestionnaires de la classe Key- 
BoardEvent : 

stage . addE vent List ener( Key boardEvent .KEY_DOWN, navigationClavierDOWN) ; 
stage . addEvent Listener (Key boardEvent .KEY_UP, navigationClavierllP) ; 

Nous utilisons deux gestionnaires, l'un pour detecter les touches enfoncees (KEY_DOWN) et le 
second pour les touches relevees (KEY_UP). 

Puisque le controle de deux touches enfoncees simultanement n'est pas pris en compte dans 
une meme structure conditionnelle, nous avons contourne ce probleme en distinguant deux 
fonctions. Ainsi, la premiere fonction se charge de detecter une touche enfoncee pendant 
que la seconde detecte une autre touche, relevee. Deux touches appuyees, puis relachees 
presque simultanement, peuvent done etre verifiees. 

Dans la premiere fonction, nous gerons la combinaison avec la touche Majuscule (key- 
Code=1 6) et dans la seconde fonction, les touches Heches (37 = fleche gauche, 38 = fleche 
haut, 39 = fleche droite et 40 = fleche bas). 
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La premiere fonction commence par identifier la touche enfoncee en affichant son nom. 
Cela permet d'evaluer, en fonction du systeme et du clavier, si les valeurs utilisees corres- 
pondent bien a l'environnement de developpement. 

trace ("le code de la touche enfoncee est : "+evt.keyCode) 

Cette fonction definit ensuite une variable qui nous renseigne sur le fait que la touche 
Majuscule (keyCode==16) est enfoncee : 

if (evt . keyCode==16) { 
toucheBase=16; 

} 



Les touches de commande 

En ActionScript 3, les touches de commande sont egalement identifiables par des noms de proprietes : 

■ La propriete shif tKey correspond a la touche Shift ou Majuscule. 

■ La propriete altKey correspond a la touche Alt. 

■ La propriete Ctrl Key correspond a la touche Controle. 




Cette valeur est initialisee dans la fonction suivante (navigationClavierUP), lorsque l'uti- 
lisateur relache les touches du clavier. En d'autres termes, les actions associees a la touche 
Majuscule n'ont d'effet que si celle-ci reste enfoncee pendant que la deuxieme fonction est 
executee. Seule la combinaison des deux touches modifie Taction a l'execution de la 
deuxieme fonction. 

La deuxieme fonction verifie la touche complementaire lorsqu'elle est relachee en nous 
informant d'abord, dans la fenetre de sortie, sur son nom, ainsi que differentes valeurs utilisees 
dans les autres conditions : 

trace ("le code de la touche enfoncee est : "+evt.keyCode) 

trace ( "sens = "+sens) ; 

trace ( "toucheBase = "+toucheBase) 

trace ( "toucheSupplementaire = "+toucheSupplementaire) 

Les deux conditions suivantes appliquent, si la touche Majuscule est effectivement enfoncee, 
une rotation en Y de 90°, dans un sens ou dans 1' autre : 

if (toucheBase==16 && toucheSupplementaire==37) { 

TweenMax.to(camera, 1, {rotationY:camera.rotationY-90, delay:0, 

ease:Strong.easeOut}) ; 
toucheBase=999; 
toucheSupplementaire=999 ; 
sens-=90; 
if (sens<=-360) { 
sens=0; 

} 

} 

if (toucheBase==16 && toucheSupplementaire==39) { 

TweenMax.to(camera, 1, {rotationY: camera. rotationY+90, delay:0, 
ease:Strong.easeOut}) ; 
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toucheBase=999; 
toucheSupplementaire=999; 
sens+=90; 
if (sens>=360) { 
sens=0; 

} 

} 

La valeur affectee a la touche Majuscule (toucheBase=1 6) est initialisee des que Taction 
est activee. Ainsi, l'utilisateur peut effectuer d'autres commandes, qui n'impliquent pas la 
touche Majuscule, sans risquer de compromettre les autres actions du programme. Pour etre 
initialisee, la valeur est passee a 999, qui ne correspond a aucune touche. 

Si, en plus, la touche relachee correspond a une des quatre fleches du clavier (&& touche- 
Supplement_aire==37), alors, le sens de la camera est modifie : 

if (toucheBase==16 && toucheSupplementaire==37) { 

TweenMax.to(camera, 1, {rotationY:camera.rotationY-90, delay:0, 
»» ease:Strong.easeOut}) ; 
toucheBase=999; 
toucheSupplementaire=999; 
sens-=90; 
if (sens<=-360) { 
sens=0; 

} 

} 

L' action est declinee aussi pour la fleche droite (39). Plus bas, des conditions lancent les dif- 
ferents mouvements de camera, sans rotation, pour les combinaisons de touche simples. Ces 
animations sont executees meme si l'utilisateur a enfonce la touche Majuscule : 

if (sens==0 | | sens==360) { 

if (evt.keyCode==37) { 

toucheSupplementaire=37; 

TweenMax.to(camera, 1, {x: camera. x-200, delay:0, ease : Strong . easeOut} ) ; 

} 

//actions des autres fleches du clavier 
} 

Le principe est decline pour chaque touche (37, 38, 39 ou 40) et, surtout, selon chaque 
valeur d' orientation de camera definie par sens. 

Selon la position relative de la camera, il faut en effet ajuster les commandes de sorte qu'un 
utilisateur qui a effectue une rotation de 90° a droite (Maj+Fleche droite) puisse continuer 
d'avancer en appuyant sur la fleche du haut, et non en appuyant sur la fleche de droite. 

Voici plus precisement le mecanisme qui regit l'ensemble des instructions a executer : dans 
un espace 3D, au sol, sont imprimes les axes X et Z. Pour avancer tout droit, nous incremen- 
tons notre position sur l'axe Z. Pour nous deplacer lateralement, en crabe, nous utilisons 
done l'axe X. Si maintenant nous faisons pivoter la camera de 90° a droite, nous percevons 
desormais ce qui longe l'axe X, anciennement a notre droite, en face de nous. Mais, la com- 
mande du clavier Fleche haut, elle, continue de controler le deplacement sur Z. Si nous acti- 
vons la touche Fleche haut, nous nous deplacons done maintenant sur la gauche (axe Z). 
Pour que le deplacement a gauche se fasse desormais avec la fleche de gauche, nous devons 
definir une condition. Si nous voulons autoriser l'utilisateur a s'orienter indifferemment a 
droite ou a gauche et d'avant en arriere, nous devons definir quatre blocs de conditions. 
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Ces conditions verifient 1' orientation appliquee a la camera a l'aide de la variable sens. Les 
valeurs sont incrementees ou diminuees de 90 a chaque modification de la rotation de la 
camera en Y. Lorsque cette valeur atteint la limite de +360 ou -360, nous l'initialisons a 0. 
A l'interieur de chaque condition, nous ajoutons done des controles qui determinent le type de 
deplacement a effectuer selon Tangle observe. Nous ajustons pour cela deux parametres : le 
signe plus ou moins attribue au pas d' incrementation ainsi que l'axe de defilement X ou Z : 

TweenMax.to(camera, 1, {x:camera.x-200, delay :0, ease : Strong . easeOut} ) ; 

Pour terminer, une interpolation indique a 1' aiguille de la boussole de pivoter en fonction de 
cette orientation : 

TweenMax.to(boussole_mc.fondBoussole_mc, 1, {rotation : -sens, delay:0, 
ease : Strong . easeOut} ) ; 



Verifier les valeurs de ses propres touches clavier. Pour verifier instantanement les valeurs de 
I'ensemble de vos touches clavier, placez le code suivant dans la fenetre Actions d'un document Flash 
et publiez-le. Le document "chI0_3DpaperVision_3b.fla" contient ce programme : 

// afficher les commandes de clavier 
for (var i:int = 33; i< 126;i++){ 

tracefi + "\t: " + String. f romCharCode(i) ) 

} 

Dans les deux tableaux qui suivent, nous indiquons les valeurs numeriques qui correspon- 
dent aux claviers ASCII francais et americain. Vous y trouverez les valeurs vous permettant 
de developper d'autres actions a partir des commandes du clavier, selon sa configuration. 

Tableau 10.1 : Valeurs des principales commandes de clavier ASCII 



Denomination des touches 



Valeur numerique 



Retour 


8 


Tabulation 


9 


Entree 


13 


Majuscule 


16 


Ctrl/Controle 


17 


Alt 


18 


Pause/Break/Attn 


19 


Verrouillage majuscule 


20 


Escape 


27 


Page haut 


33 


Page bas 


34 


Fin 


35 


Sommaire (fleche haut et gauche, au-dessus de la touche fin) 


36 


Fleche gauche 


37 


Fleche haut 


38 


Fleche droite 


39 
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Tableau 10.1 : Valeurs des principales commandes de clavier ASCII (suite) 



Denomination des touches Valeur numerique 



Fleche bas 


40 


Insert 


45 


Supprimer 


46 


0 


48 


1 


49 


2 


50 


3 


51 


4 


52 


5 


53 


6 


54 


7 


55 


8 


56 


9 


57 


a 


65 


b 


66 


c 


67 


d 


68 


e 


69 


f 


70 


g 


71 


h 


72 


i 


73 


j 


74 


k 


75 


I 


76 


m 


77 


n 


78 


0 


79 


p 


80 


q 


81 


r 


82 


s 


83 


t 


84 


□ 


85 


V 


86 


W 


87 


X 


88 


y 


89 


z 


90 


Touche Windows de gauche 


91 



La 3D et PaperVision 



325 



Tableau 10.1 : Valeurs des principales commandes de clavier ASCII (suite) 



Denomination des touches 

Touche Windows de droite 

0 (pave numerique) 

1 (pave numerique) 

2 (pave numerique) 

3 (pave numerique) 

4 (pave numerique) 

5 (pave numerique) 

6 (pave numerique) 

7 (pave numerique) 

8 (pave numerique) 

9 (pave numerique) 
Multiplier 
Additionner 
Soustraire 

Point decimal 

Diviser 

f1 

f2 

f3 

f4 

f5 

f6 

f7 

f8 

f9 

f10 

f11 

f12 

Verrouillage pave numerique 
Verrouillage defilement 
Point-virgule 
Egal 

Commande 
Tiret 
Point 
Slash 

Accent grave 
Crochet ouvert 
Back slash 
Crochet ferme 

Simple quote ou apostrophe simple 



Valeur numerique 

92 

96 

97 

98 

99 

100 

101 

102 

103 

104 

105 

106 

107 

109 

110 

111 

112 

113 

114 

115 

116 

117 

118 

119 

120 

121 

122 

123 

144 

145 

186 

187 

188 

189 

190 

191 

192 

219 

220 

221 

222 
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Tableau 10. 2 : Valeur des principales commandes de clavier US 



Denomination des touches 


Valeur numerique 


Alt 


18 


Arrow down 


40 


Arrow left 


37 


Arrow right 


39 


Arrow up 


38 


Backspace 


8 


Caps Lock 


20 


Ctrl 


17 


Delete 


46 


End 


35 


Enter 


13 


Esc 


27 


F1 


112 


F2 


113 


F3 


114 


F4 


115 


F5 


116 


F6 


117 


F7 


118 


F8 


119 


F9 


120 


F10 


121 


F11 


122 


F12 


123 


Home 


36 


Insert 


45 


Num Lock 


144 


(NumPad) - 


109 


(NumPad) * 


106 


(NumPad) . 


110 


(NumPad) / 


111 


(NumPad) + 


107 


(NumPad) 0 


96 


(NumPad) 1 


97 


(NumPad) 2 


98 


(NumPad) 3 


99 


(NumPad) 4 


100 


(NumPad) 5 


101 


(NumPad) 6 


102 


(NumPad) 7 


103 



La 3D et PaperVision 



327 



Tableau 10. 2 : Valeur des principales commandes de clavier US (suite) 



Denomination des touches Valeur numerique 



(NumPad) 8 


104 


(NumPad) 9 


105 


Page Down 


34 


Page Up 


33 


Pause 


19 


Print Scrn 


44 


Scroll Lock 


145 


Shift 


16 


Spacebar 


32 


Tab 


9 


A 


65 


B 


66 


C 


67 


D 


68 


E 


69 


F 


70 


G 


71 


H 


72 


1 


73 


J 


74 


K 


75 


L 


76 


M 


77 


N 


78 


0 


79 


P 


80 


Q 


81 


R 


82 


S 


83 


T 


84 


U 


85 


w 
V 


OD 


w 


87 


X 


88 


Y 


89 


Z 


90 


1 


49 


2 


50 
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Tableau 10. 2 : Valeur des principales commandes de clavier US (suite) 



Denomination des touches 


Valeur numerique 


3 


51 


4 


52 


5 


53 


6 


54 


7 


55 


8 


56 


9 


57 


0 


48 


- 


222 




189 




188 




190 


/ 


191 


; 


186 


[ 


219 


\ 


220 


i 


221 




192 




187 



Pour connaitre la liste des principales commandes clavier supportees par le systeme Linux, 
reportez-vous a l'adresse suivante : http://www.comptechdoc.org/os/linux/howli- 
nuxworks/linux_hlkeycodes.html. 

Interactivity sur les objets 3D. Pour en savoir plus sur les interactions possibles avec les 
objets 3D, consultez la page suivante: http://papervision3d-fr.com/2009/09/16/interactive- 
displayobject3d/. 

Gestion des lumieres dans PaperVision. Pour en savoir plus sur I'ajout de lumieres dans 
la scene 3D, consultez la page : http://papervision3d-fr.com/2009/09/22/la-lumiere-dans- 
papervision3d/. 

Guide de reference PaperVision. Un guide de reference sur PaperVision est disponible a cette 
adresse : http://papervision3d.googlecode.com/svn/trunlc/as3/trunl</docs/class-summary.html. 

Aide en ligne de PaperVision. De nombreux utilisateurs de la classe PaperVision travaillent en 
mode de programmation objet en externalisant leur code sous la forme de classes et de packages 
dans des fichiers ayant I'extension .as. Des sites communautaires et des blogs font reference a cette 
methode. Vous y trouverez des aides complementaires pour vous guider sur les techniques avancees 
de programmation avec PaperVision : 

■ http://content.madvertices.com/articles/PV3D7raining/default.htm0setUp. 

■ http://wild.mediabox.fr/tutoriaux/flash/papervision_3D_bases. 

■ http://blog.pixlp.com/index.php/. 
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A retenir 

■ Les positions 3D des objets et des cameras peuvent etre controlees par les touches du clavier a I'aide 
de la propriete keyCode. 

■ Pour construire une navigation viable, vous devez detecter la rotation de la camera et en determiner 
I'axe de defilement x ou z. 

Synthese 

Dans ce chapitre, vous avez appris a integrer des objets 3D au sein de l'environnement 
Flash, a I'aide de la classe PaperVision, en programmant les commandes PaperVision 
directement dans le scenario. Vous savez placer les scenes 3D dans un decor multicalques et 
interagir avec les trajectoires animees de la camera et deplacer les objets 3D, y compris en 
utilisant les touches du clavier. 

Les bogues d'affichage, le poids limite, compare a la qualite de resolution disponible en flux 
video F4V favorise cependant encore largement la video interactive a la technologie 3D 
interactive sur le Web aujourd'hui. Mais les innovations en cours en font un outil a ne pas 
negliger dans les developpements a venir. 
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Introduction 

Bien que Flash integre deja tout type de donnees, il peut etre interessant de developper des 
fonctionnalites avancees sur des contenus traites dynamiquement. Par exemple, vous pou- 
vez proposer une fonctionnalite de grossissement d'une image, une fonctionnalite de retou- 
che colorimetrique d'une image, pour tester des ambiances et offrir de nouveaux services a 
des utilisateurs exigeants. 

Flash propose un moteur de traitement d'images avance. II dispose, pour cela, de deux classes 
qui permettent de modifier intrinsequement les pixels d'une image (colorMatrixFilter) et 
de deformer un objet graphique (Matrix). 

Dans ce chapitre, nous abordons le traitement des pixels de 1' image a travers ces diffe- 
rentes methodes. Nous voyons comment realiser, entre autres, des interfaces sans cre- 
nelage, une loupe, des filtres de traitement colorimetrique, des fonctionnalites 
d'impression sur des zones definies de l'interface. Nous verrons ensuite, dans le pro- 
chain chapitre, comment exploiter ces techniques pour mettre au point, par exemple, un 
moteur de rendu en relief. 

Lissage des images bitmap 

Le lissage des images est requis des que l'image suit une transformation d'echelle ou de 
rotation. Sans lissage, l'image animee apparait crenelee et un voile cristallin semble meme 
la deformer des qu'elle subit un mouvement. 

Comme evoque aux Chapitres 5 et 9, nous avons vu comment lisser une image en activant 
1' option Autoriser le lissage, depuis les proprietes de chaque image, dans la bibliotheque. 
Mais, dans de nombreux cas, pour une galerie d'images dynamique par exemple, il peut etre 
interessant d'activer cette option avec ActionScript. Pour ce faire, nous utilisons la propriete 
smoothing. 

Pour appliquer cette propriete, nous devons au prealable comprendre qu'elle s'applique seu- 
lement a un objet image, et non a son conteneur. II en resulte que, pour lisser un MovieClip, 
nous devons, au prealable, creer une enveloppe image (Bitmap) qui capture ce que repre- 
sente le MovieClip, pour seulement ensuite le lisser par ActionScript. 

Dans cette section, nous allons voir comment lisser une image chargee dynamiquement sur 
la scene, dans un MovieClip. 
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Dans le document "chl l_apiGraphisme_l.fla", sur la scene principale, est positionne un 
MovieClip vide, nomme contenu_mc, ainsi qu'un bouton Loupe. Le bouton Loupe agrandit 
et effectue une rotation sur ce MovieClip, si bien que sans les proprietes de lissage, nous 
pouvons constater l'apparition d'un crenelage. 

En publiant le document, l'image est d'abord chargee dans le MovieClip et afriche deja un 
lissage. En activant le bouton Loupe, l'image effectue une rotation et subit un agrandissement, 
mais les pixels restent lisses, meme a grande echelle (voir Figure 11.1). 

Figure 11.1 

Apercu du 
document publie. 



Dans la fenetre de scenario de la scene principale, au-dessus du caique f ondjnc, figurent le 
symbole contenu_mc (vide) et le bouton loupe_btn (voir Figure 11.2). 



Figure 1 1 .2 

Apercu du 
scenario de la 
scene principale. 



SCENARIO EDIT EUR UE MOUVEMEN I 
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Dans la fenetre Actions, nous pouvons lire le code suivant 

// initialisation 

import gs.*; 
import gs. easing.*; 
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import gs. events.*; 

// actions 

// chargement 

var chargeur = new Loader(); 

chargeur. load (new URLRequest ( "images/ pro vence/Roussillon . j pg" ) ) ; 

chargeur. contentLoaderlnfo.addE vent List ener( Event .COMPLETE, chargementComplet) ; 

function chargementComplet(evt:Event) { 
// lissage 

var imageDepart : Bitmap = evt. target. content; 
var inf ormationlmage : BitmapData=new 
BitmapData( imageDepart .width , imageDepart . height) ; 
inf ormationlmage .draw (contenu_mc) ; 
imageDepart . smoothing=true ; 
// affichage 

contenujnc . addChild ( imageDepart ) ; 

contenu_mc.x=100; 

contenujnc. y=30; 

} 

// bouton loupe 

loupe_btn . addEventListener (MouseEvent .CLICK, tourner Image) ; 
function tournerlmage (evt:MouseEvent) { 
if (contenujnc. rotation>-89) { 

TweenMax.to(contenujnc, 2, {rotation:-90, scaleX:2, scaleY:2, x:0, 
»»y:520, delay:0, ease:Strong.easeInOut}) ; 
} else { 

TweenMax.to(contenujnc, 2, {rotation:©, scaleX:1, scaleY:1, x:100, y:30, 
delay :0, ease: Strong. easelnOut}) ; 

} 

} 

Ce code est structure en trois parties. La premiere appelle les classes utilisees pour les inter- 
polations TweenMax. La deuxieme charge l'image et la lisse. La troisieme partie gere l'interac- 
tivite avec le bouton Loupe. 

La premiere action de la deuxieme partie charge l'image, comme vu au Chapitre 5. Aussitot 
apres, la fonction appelee affiche l'organisation de l'image chargee, pour lui permettre 
d'obtenir un lissage : 

function chargementComplet(evt:Event) { 
// lissage 

var imageDepart : Bitmap = evt. target. content; 
var inf ormationlmage: BitmapData=new 
BitmapData( imageDepart .width , imageDepart . height) ; 
inf ormationlmage .draw (contenujnc) ; 
imageDepart . smoothing=true ; 
// affichage 

contenujnc . addChild ( imageDepart ) ; 

contenujnc.x=100; 

contenujnc. y=30; 

} 
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Pour appliquer un lissage, nous definissons d'abord un objet vectoriel texture d'une image. 
Et seulement une fois cet objet materialise, nous pouvons lui appliquer un lissage. 

Pour lisser une image chargee dynamiquement, nous procedons done en plusieurs etapes. 
D'abord, nous commencons par definir le flux charge (evt. target. content) comme un 
objet image avec un type Bitmap : 

var imageDepart : Bitmap = evt. target. content; 

Puis, nous placons les donnees de l'image (ses informations colorimetriques), dans un nouvel 
objet BitmapData : 

var inf ormationlmage : BitmapData=new 

BitmapData (imageDepart .width , imageDepart .height ) ; 

Nous indiquons, en parametre de cette methode, les dimensions de cet objet (largeur et hau- 
teur). Les largeur et hauteur indiquees sont ici celles de l'objet Bitmap deja identifie. 

Les donnees vehiculees par l'objet BitmapData sont materialisees sur le symbole 
contenujnc par 1' instruction suivante : 

inf ormationlmage .draw(contenu_mc) ; 

L'image est en fait placee sur l'enveloppe exterieure du MovieClip contenu_mc et non a 
l'interieur. Pour le verifier, nous pouvons lire le contenu du symbole en utilisant l'une des 
instructions suivantes. Ces instructions retournent chacune une valeur nulle. L'image n'est 
done pas contenue dans l'objet, mais bien en surface : 

trace(contenu_mc.numChildren) ; // 0 

trace (contenujnc . getChildAt (0) ) ; // Index hors limites 

Par contre, e'est bien a l'objet vectoriel texture BitmapData que nous appliquons la pro- 
priety de lissage smoothing : 

imageDepart . smoothing=true; 

Nous pouvons alors afficher l'objet, le placer avec des proprietes x et y, voire, le deformer. 
II restera lisse : 

contenujnc . addChild (imageDepart ) ; 
contenu _mc.x=1 00; 
contenujnc. y=30; 

Le code se termine sur la gestion du bouton qui effectue les interpolations d'echelle et de 
rotation : 

// bouton loupe 

loupe Jotn . addEventListener (MouseEvent .CLICK, tourner Image) ; 
function tournerlmage (evt:MouseEvent) { 
if (contenujnc. rotation>-89) { 

TweenMax.to(contenujnc, 2, {rotation:-90, scaleX:2, scaleY:2, x:0, 
*»y:520, delay:0, ease:Strong.easeInOut}) ; 
} else { 

TweenMax.to(contenujnc, 2, {rotation:©, scaleX:1, scaleY:1, x:100, y:30, 
' ■■> delay :0, ease: Strong. easelnOut}) ; 

} 

} 

Dans la structure conditionnelle, si le conteneur affiche une rotation inferieure a -89°, la 
premiere transition est jouee et porte ce conteneur a une rotation de 90°. Lorsque la condition 
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n'est plus verifiee, une interpolation inverse est lancee et retourne l'objet a une rotation 0, 
superieure done a -89°. Chaque interpolation, en plus de faire tourner l'objet, applique une 
modification d'echelle. Sans le lissage, l'image laisserait apparaitre un crenelage. Pour veri- 
fier que le lissage est bien actif, vous pouvez neutraliser 1' instruction suivante, en commen- 
taire, puis la restaurer: 

//imageDepart . smoothing=true; 

A la Figure 11.3, nous soulignons la difference entre l'image affichee avec un lissage et 
celle qui beneficie du lissage. La difference est surtout perceptible pendant le mouvement, 
oil l'image saute, en plus d' apparaitre crenelee si elle n'est pas lissee. 




Le document actuel traite une image chargee dynamiquement. Une declinaison de cet 
exemple, adapte pour une image placee manuellement dans le scenario, est disponible dans 
le fichier "chll_apiGraphisme_lb.fla". 

A retenir 

■ Pour lisser une image, nous devons la placer en tant qu'objet Bitmap sur un conteneur et lui passer 
la propriete smoothing sur true. 

■ Le lissage augmente les ressources graphiques necessaires pour I'execution du programme. II ne 
faut pas en abuser. 



Lissage des graphismes vectoriels 

Tout comme pour les images bitmap, il est possible d'optimiser aussi l'affichage des formes 
graphiques vectorielles. Pour cela, nous utilisons la propriete cacheAsBitmap que nous 
definissons sur true. 

Dans cette section, nous appliquons cette propriete dynamiquement sur un symbole qui 
contient plusieurs occurrences d'une forme graphique, importee dTllustrator. 
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Exemples > chl l_apiGraphisme_2.fla 



Dans le document "chll_apiGraphisme_2.fla", sur la scene principale, apparait un MovieClip. 
A l'interieur, plusieurs occurrences d'une plume vectorielle sont superposees (voir Figure 1 1 .4). 



Figure 1 1 .4 

Apercu du 
document. 




Dans le scenario, seul le symbole contenu_mc apparait entre le caique f ond_mc et le caique 
actions (voir Figure 11.5). 



Figure 1 1.5 

Apercu du 
scenario de la 
scene principale. 
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Dans la fenetre Actions, une instruction applique la mise en cache sur le symbole conteneur 
contenujnc : 

// Mise en cache 

contenu_mc . cacheAsBitmap=true ; 

La mise en cache peut egalement etre appliquee directement depuis l'lnspecteur de proprietes, 
en cliquant sur l'option intitulee Cache sous forme de bitmap (voir Figure 1 1.6). 
Chaque mise en cache induit la creation d'une image bitmap a partir des elements vectoriels 
affiches dans un clip. En utilisant cette option, nous alourdissons considerablement le document. 
Quelques restrictions d' utilisation doivent done etre soulevees : 
• Limitez le nombre de symboles qui utilisent cette propriete. Preferez rassembler les formes 
graphiques vectorielles dans un seul et unique symbole. 
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N' animez pas le symbole dont le contenu est mis en cache (pas de rotation, pas de mise 
a l'echelle). Les deplacements simples sont possibles (animation par translation en X ou 
Y, ou deplacements avec startDrag). Car une deformation de l'image oblige le moteur 
de rendu a creer une nouvelle image a chaque modification. Vous ralentissez done inde- 
niablement les performances de 1' application. 

Si l'image vehiculee doit apparaitre a de nombreuses reprises, ou etre superposee par 
des contenus deja tres gourmands en ressources, il est souhaitable d'activer cette option. 

Le texte contenu dans une zone defilante (avec un ascenseur par exemple) peut etre mis 
en cache. 

Une illustration en arriere-plan d'un site, une carte du monde fixe et non zoomee, peut 
egalement etre mise en cache. 



Figure 1 1 .6 

Apercu du 
document. 
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Vous pouvez lisser les bords d'une forme vectorielle en activant, directement depuis I'lnspecteur de 
proprietes, et sur la forme elle-meme, dans la categorie Remplissage et trait, I'option Reperes situee a 
droite du champ Echelle. Cette option aligne automatiquement les formes graphiques sur des abscisses 
et des ordonnees entieres. Elle evite done I'affichage parfois bancal de certains contours. 



A retenir 

■ II est possible d'optimiser les performances d'affichage pour les formes vectorielles. Nous utilisons 
pour cela la propriete cacheAsBitmap. 

■ La mise en cache des formes vectorielles ne doit cependant pas etre systematique et ne doit concerner 
que les images non deformees, et non animees. 
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Effet loupe avec optique deformante 

Pour creer une loupe, a priori, rien de plus simple que de dupliquer une zone de 1' image a 
agrandir, dans un conteneur masque. Mais pour que 1' element agrandi suive correctement le 
mouvement de deplacement de la loupe, nous devons definir une equation. De meme, pour 
que la loupe affiche une image agrandie et deformee, nous devons aussi appliquer un flou 
sur le masque qui la canalise. Or, un masque ne supporte un flou que si celui-ci a ete cree 
dynamiquement. 

Dans cette section, nous utilisons une image placee dans le scenario pour creer un effet de 
loupe sur une lentille, mobile, par simple deplacement (voir Figure 1 1.7). 



Figure 11.7 

Apercu du 
document publie. 




- ! „ 



Exemples > chl l_apiGraphisme_3.fla et Exemples > chl l_apiGraphisme_3b.fla 

Dans le document "chll_apiGraphisme_3.fla", sur la scene principale, figure le Movie- 
Clip contenu_mc, qui affiche une image. Les dimensions de ce MovieClip sont reduites 
a 50 %. Au-dessus, est place un symbole nomine loupe_mc, constitue d'une forme 
degradee semi-transparente et d'un bouton de deplacement. Sur la scene principale, un 
disque noir est place hors champ, sur la droite. Ce MovieClip, nomme masque_mc, sert 
de masque pour l'image agrandie. L'image agrandie, elle, apparait dans le scenario sous 
le nom d'occurrence zoom_mc (voir Figure 11.8). Son caique est desactive mais 
demeure visible a la publication. Ce symbole est en fait une deuxieme occurrence du 
meme symbole contenu_mc, mais affiche a 100 %. L'image qu'il vehicule n'est done 
pas deformee. 
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Figure 1 1 .8 

Apercu du 
scenario. 
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Dans la fenetre de scenario, au-dessus des autres caiques, apparait le caique actions. 
II affiche le code suivant : 

// initialisation 

import flash. filters. BlurFilter; 

loupe_mc . cacheAsBitmap=t rue ; 

var f lou : BlurFilter=new BlurFilter(10,10,3) ; 

masquejnc .f ilters=[f lou] ; 

zoom_mc . mask=masque_mc ; 

var zoneDeplacement : Rectangle=new Rectangle(150, 100,470,350) ; 

// actions 

// emplacement de la loupe 

loupe_mc.deplacerLoupe_btn.addEventListener(MouseEvent.MOUSE_DOWN, deplacerLoupe ) ; 
function deplacerLoupe(evt:MouseEvent) { 

loupe_mc . st art Drag (false, zoneDeplacement ) ; 

} 

addEventListener(MouseEvent.MOUSE_UP, arreterDeplacement ); 
function arreterDeplacement(evt:MouseEvent) { 
stopDragO ; 

} 

// positionnement de 1' image zoomee 

addEvent Listener (Event . ENTER_FRAME, posit ionMasque ) ; 

function positionMasque(evt : Event) { 

masque_mc . x=loupe_mc . x ; 

masque_mc . y=loupe_mc . y ; 

zoom_mc.x=( ( (loupe_mc.x*-1 )+(stage.stageWidth/2) ) + (zoomjne. width/2) ) 
-loupe_mc .width ; 

zoom_mc.y=( ( (loupe_mc .y*-1 )+(stage . stageHeight/2) ) + (zoom_mc . height/2) ) 
-loupe_mc . height ; 

} 

Le programme est organise en trois parties : P initialisation, les actions de deplacement de la 
loupe et la gestion de Pimage agrandie. 

La loupe est constituee d'un MovieClip qui contient principalement une forme graphique 
presque transparente. Cette forme laisse done voir Pimage situee a Parriere-plan. Dans le 
programme, nous rendons la loupe mobile sur Paction de Putilisateur. Mais cette loupe 
n'exerce rien, en tant que telle, sur Pimage survolee. C'est, sous la loupe, que nous avons 
place une image agrandie, dans un clip, clip sur lequel nous appliquons un masque avec 
ActionScript. 

II est a noter que les nitres n'affectent que les masques crees en ActionScript. C'est la raison 
pour laquelle nous procedons ainsi et non a partir des options de masque disponibles dans le 
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scenario. Dans le programme, plus loin, une action determine le positionnement de ce clip 
en fonction du positionnement de la loupe. Pour affiner l'effet, nous ajoutons aussi au mas- 
que un riltre flou. C'est ce flou qui va permettre de simuler la distorsion de l'image a travers 
la lentille. 

Pour realiser ce dispositif, le code importe tout d'abord la sous-classe BlurFilter (flou) 
utilisee pour adoucir les bords du masque : 

// initialisation 

import flash. filters. BlurFilter; 

Puis, nous definissons les premieres instructions : 

loupe_mc . cacheAsBitmap=t rue ; 

var flou:BlurFilter=new BlurFilter(10,10,3) ; 

masque_mc.filters=[flou] ; 

zoom_mc . mask=masque_mc ; 

var zoneDeplacement : Rectangle=new Rectangle(150, 100,470,350) ; 

Nous commencons par appliquer un lissage sur les formes vectorielles contenues dans la 
loupe a l'aide de la propriete cacheAsBitmap abordee dans la section precedente. 

Nous appliquons ensuite un nitre flou sur le symbole masque_mc, utilise pour reveler une 
partie de l'image agrandie. En appliquant une valeur de flou de quelques pixels seulement, 
nous definissons un contour assez fin pour le masque, et done, une forme de lentille plutot 
plate. En specifiant des valeurs plus elevees, nous creons une forme de lentille plus convexe. 

A la suite, nous attachons le symbole masquejnc a l'image agrandie, a l'aide de la propriete 
mask (zoom_mc . mask=masque_mc). 

Nous definissons enfin un rectangle pour canaliser la zone de deplacement de la loupe. 
Nous limitons le deplacement a une surface proche de la surface de l'image, ceci afin d'evi- 
ter que l'utilisateur ne percoive encore, dans les extremites, l'image de dessous, ce qui serait 
incoherent d'un point de vue graphique. 

Ensuite, viennent les actions qui definissent le deplacement de la loupe : 

// actions 

// deplacement de la loupe 

loupe_mc.deplacerLoupe_btn.addEventListener(MouseEvent.MOUSE_DOWN, deplacerLoupe ) ; 
function deplacerLoupe(evt :MouseEvent) { 
loupe_mc . startDrag (false , zoneDeplacement ) ; 

} 

addEventListener(MouseEvent .MOUSEJJP, arreterDeplacement ); 
function arreterDeplacement(evt:MouseEvent) { 
stopDragO ; 

} 

La premiere fonction active le deplacement de la loupe des que l'utilisateur appuie sur le 
bouton situe en haut et a droite de l'objet (deplacementLoupe_btn). Ce deplacement est 
defini par les parametres false et zoneDeplacement. false designe le fait que l'objet ne 
s'accroche pas sur le pointeur en son centre. Le deplacement est done normal. La variable 
zoneDeplacement fait reference a la zone rectangulaire definie comme limites de la zone 
de deplacement. 

La deuxieme fonction interrompt tous les deplacements, quels qu'ils soient, des que l'utili- 
sateur relache le bouton de la souris. Du fait que l'ecouteur est place sur la timeline du 



API d'affichage et de colorimetrie 



341 




scenario principal, l'effet de relachement de souris est percu aussi bien sur l'objet clique 
qui' en dehors. 

La troisieme partie affiche les commandes relatives au deplacement de 1' image agrandie : 

// positionnement de 1' image zoomee 
addEventListener( Event .ENTER_FRAME, posit ionMasque) ; 
function positionMasque(evt : Event) { 

masquejnc . x=loupe_mc . x ; 

masquejnc . y=loupe_mc . y ; 

zoom_mc.x=( ( (loupe_mc.x*-1 )+(stage.stageWidth/2) ) + (zoom_mc. width/2) ) 
- -loupe_mc .width ; 

zoom_mc.y=( ( (loupe_mc .y*-1 )+(stage . stageHeight/2) ) + (zoom_mc . height/2) ) 
»» -loupe_mc . height ; 

} 

Dans cette fonction executee continuellement (ENTER_FRAME), nous redefinissons les positions 
des symboles masque_mc et zoom_mc. 

Le masque, affecte a l'image agrandie (zoom_mc), se cale sur la position de la loupe en X et 
Y. La zone visible de l'image agrandie suit done le mouvement de la loupe. Les deux objets 
se superposent parfaitement, car leurs centres respectifs sont tous deux situes au milieu de 
la forme que chacun d'eux vehicule : 

masquejnc . x=loupe_mc . x; 
masquejnc . y=loupe_mc . y ; 

L'image agrandie (zoom_mc) est, quant a elle, positionnee en fonction de la loupe. L'equa- 
tion que nous utilisons indique sommairement Taction suivante : la position de l'image 
agrandie (zoom_mc) correspond a la position de la loupe en valeur negative (voir 
Figure 11.9), plus la moitie de la scene (pour permettre d'inverser le coefficient lorsque le 
pointeur passe le centre du document), plus la demie largeur ou hauteur du zoom (pour 
recentrer l'image agrandie) moins les dimensions de la loupe (pour center l'image avec la 
loupe). 

Figure 11.9 zoom_mc.width/2 
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Plus clairement, a travers cette equation etendue, nous designons les actions suivantes : 

Lorsque nous deplacons la loupe, si nous voulons que les extremites des deux images coin- 
cident pendant le deplacement, et que 1' image agrandie ne se retrouve pas complete ment 
decalee lorsque nous survolons les bords de 1' image du dessous, nous devons definir sa 
position selon un coefficient. Ce coefficient eleve ici le pas du deplacement de 1' image 
agrandie en fonction de sa distance qui la separe du centre du document. Lorsque la loupe 
part a gauche, nous elevons ainsi la valeur negative pour accelerer le pas du deplacement 
vers la gauche. Inversement, lorsque le deplacement s'effectue a droite, nous incremen- 
tons la position de l'image agrandie en multipliant son pas, par un coefficient, cette fois- 
ci, positif. 

Pour definir la valeur de ce coefficient, nous devons d' abord integrer, dans notre calcul, les 
coordonnees du centre du document. C'est pourquoi nous utilisons stage . stageWidth/2, 
qui designe le centre du document. Mais, nous employons aussi une valeur negative 
(loupe_mc.x*-1) pour que l'image agrandie se deplace en sens inverse de la loupe. Cela 
permet de faire coincider les bords des deux images, lorsque la loupe atteint les extremites 
de l'image originale (voir Figure 11.10) : 

(loupejnc . x*-1 )+(stage . stageWidth/2) 



Figure 11.10 

Mecanisme du 
positionnement 
des images sur les 
bords. 
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Puis, nous ajoutons la moitie de la largeur de l'image agrandie, pour recentrer l'image dans 
la scene (zoomjnc .width/2). Nous retranchons, enfin, la moitie de la largeur de la loupe, 
pour recentrer le contenu par rapport a la loupe elle-meme (-loupe_mc .width). 

Nous declinons ensuite le precede pour la hauteur avec les proprietes Yet height. 

Dans le fichier "chl l_apiGraphisme_3b.fla", nous proposons une variante de l'outil loupe. 
Dans ce document, la loupe suit directement le pointeur mais avec l'effet d'amortissement 
que nous avons etudie au Chapitre 1 . Le code est le suivant : 

addEventListener ( Event . ENTER_FRAME, bougerLaBoule) ; 

function bougerLaBoule (evt: Event) { 
boule_mc . x+=(mouseX-boule_mc . x) /20; 
boule_mc .y+=(mouseY-boule_mc . y ) /20; 
ombre_mc . x=boule_mc . x ; 
ombre_mc . y=boule_mc . y ; 

} 
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Pour en savoir plus sur les techniques d' animation en ActionScript, reportez-vous au Chapi- 
tre 1. 

A retenir 

■ Pour creer une loupe, nous devons creer un masque flou, dynamiquement, afin de reconstituer la 
deformation de la lentille. 

■ Nous devons placer I'image dupliquee et masquee en fonction de la position de la loupe en faisant 
en sorte que les extremites des deux images restent proches. 

■ Nous devons contraindre le mouvement de la loupe pour reserver I'affichage au contenu utile uni- 
quement. 

■ Nous devons mettre en cache la forme graphique translucide pour optimiser les ressources de I'utili- 
sateur. 

Filtres de correction colorimetrique 

Le moteur colorimetrique de Flash, affecte a la classe colorMatrix, permet de modifier la 
valeur de chaque pixel qui compose I'image. II est done possible d'appliquer des filtres pour 
modifier l'aspect d'une image ou en extraire certaines couches, en vue d'une exploitation 
pour le relief, par exemple. Dans le contexte de developpements plus simples, la classe 
colorMatrix permet aussi d'appliquer des filtres de saturation, de desaturation, de lumino- 
site, sur les images. Elle permet de decliner dans une meme interface differentes occurren- 
ces d'une image et de creer, a moindre poids, des decors composites complexes et aleatoires 
(une ville avec des maisons de nuances differentes, une foret avec des arbres differents, un 
trafic routier avec des vehicules de teintes differentes, mais composes a partir des memes 
symboles). 

Dans cette section, nous allons voir comment appliquer et restaurer un filtre sur une image. 
Sur le meme principe, nous abordons aussi la maniere d'appliquer dynamiquement un filtre 
a plusieurs occurrences d'une meme composition, mais avec des valeurs differentes. Nous 
voyons enfin comment animer un filtre de sorte qu'il apparaisse progressivement, grace a 
ActionScript. 

Appliquer et restaurer un filtre 

Exemples > chl 1_apiGraphisme_4.fla 

Dans le document "chll_apiGraphisme_4.fla", sur la scene principale, apparait un Movie- 
Clip qui contient une image. A droite, figure un bouton de restauration (voir Figure 11.11). 
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Figure 11.11 

Apercu de la 
scene principale, 
image normale. 




En publiant le document, 1' image est aussitot modiriee. Un filtre de saturation est automati- 
quement applique. Lorsque le bouton Restaurer est clique, 1' image revient a l'etat initial 
(voir Figure 11.12). 



Figure 11.12 

Apercu du 
document publie, 
image saturee. 




Dans le scenario de la scene principale, au-dessus du caique f ond_mc, nous distinguons les 
caiques contenu_mc et restaurer_btn, qui correspondent aux deux objets places sur la 
scene (voir Figure 11.13). 
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Figure 11.13 

Apercu du 
scenario de la 
scene principale. 
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Le caique actions affiche le code suivant : 

// initialisation 

import flash .filters . ColorMatrixFilter; 

// actions 

// filtre saturation 

var coef 1 :Number=2; 

var coef255:int=-100; 

var tableaul : Array = new ArrayO; 

tableaul = new ArrayO; 

tableaul =tableau1 .concat( [coef 1 ,0,0,0,coef255] ) ; 
tableaul =tableau1 .concat( [0,coef1 ,0,0,coef255] ) ; 
tableaul =tableau1 .concat( [0,0, coef 1 ,0,coef255] ) ; 
tableaul =tableau1 .concat( [0,0,0,1,0]); 

// 

var f iltreSaturation : ColorMatrixFilter=new ColorMatrixFilter(tableau1 ) ; 
contenu_mc .f ilters=[f iltreSaturation] ; 

// filtre restauration 
var tableau2:Array = new ArrayO; 
tableau2=tableau2.concat( [1 ,0,0,0,0] ) ; 
tableau2=tableau2.concat( [0, 1 ,0,0,0] ) ; 
tableau2=tableau2.concat( [0,0,1 ,0,0] ) ; 
tableau2=tableau2.concat( [0,0,0,1 ,0] ) ; 

var f iltreNegatif :ColorMatrixFilter=new ColorMatrixFilter(tableau2) ; 

// 

restaurer_btn . addEvent Listener (MouseEvent .CLICK, applique rFiltreNegat if ) ; 
function appliquerFiltreNegatif (evt:MouseEvent) { 
contenujnc.f ilters=[f iltreNegatif ] ; 

} 

Dans ce code, nous appliquons un filtre, dynamiquement. Nous l'appliquons a nouveau, sur 
action de l'utilisateur, en modifiant simplement les valeurs de sorte que 1' image affectee soit 
restauree. 

Les filtres colorimetriques appartiennent a la classe filters et plus specifiquement a la 
sous-classe ColorMatrixFilter. Nous l'importons via l'instruction suivante : 

// initialisation 

import flash .filters . ColorMatrixFilter; 

Plus bas, nous appliquons un filtre dont les valeurs definissent une augmentation de la satu- 
ration : 

// actions 

// filtre saturation 
var coef 1 :Number=2; 
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var coef255:int=-100; 

var tableaul :Array = new ArrayO; 

tableaul = new ArrayO; 

tableaul =tableau1 .concat( [coef 1 ,0,0,0,coef255] ) ; 
tableaul =tableau1 .concat( [0,coef1 ,0,0,coef255] ) ; 
tableaul =tableau1 .concat( [0,0, coef 1 ,0,coef255] ) ; 
tableaul =tableau1 .concat( [0,0,0,1,0]); 

// 

var f iltreSaturation : ColorMatrixFilter=new ColorMatrixFilter(tableau1 ) ; 
contenu_mc .f ilters=[f iltreSaturation] ; 

Un filtre colorimetrique, en ActionScript, se definit par une matrice de valeurs appliquee a 
chaque pixel de 1' image pour laquelle il est affecte. Cette matrice est composee d'une serie 
de cinq valeurs (Rouge, Vert, Bleu, Alpha et Luminosite) definissantle decalage de posi- 
tionnement de chaque pixel, dans le cercle chromatique, et ce pour chacune des quatre 
teintes (Rouge, Vert, Bleu et Alpha). Ainsi, nous obtenons un tableau compose de vingt 
valeurs (5x4). 

Le tableau de valeurs, utilise par la matrice de couleurs, peut egalement adopter la forme 
suivante : 

nomDuTableau = [1,0,0,0,255,0,1,0,0,255,0,0,1,0,255,0,0,0,1,0]. 
Pour des raisons de clarte, nous preferons employer la structure eclatee, qui revient stricte- 
ment au meme resultat. Cette structure offre juste l'avantage de permettre une identification 
plus rapide des valeurs appliquees distinctement pour chaque teinte (R, V, B et A) : 

var nomDuTableau : Array = new ArrayO; 
nomDuTableau = new ArrayO; 

nomDuTableau =nomDuTableau . concat ( [1 ,0,0,0,255] ) ;//R 
nomDuTableau =nomDuTableau . concat ([0,1 ,0,0,255] ) ; / / V 
nomDuTableau =nomDuTableau . concat ([0,0,1 ,0,255] ) ; / /B 
nomDuTableau =nomDuTableau . concat ( [0,0,0,1 ,0] ) ;//A 

Chaque ligne utilise la methode concat ( ) qui ajoute de nouvelles valeurs au tableau. Nous 
disons que les valeurs sont alors concatenees aux valeurs precedentes. 

Les valeurs utilisees pour definir l'intensite du rouge, du vert et du bleu de chaque teinte 
RVBA sont definies par un pourcentage. Ce pourcentage est de type decimal. Pour indiquer 
une intensite normale, nous inscrivons done la valeur 1, qui correspond a 100 %. Pour desi- 
gner une valeur nulle, nous inscrivons 0, qui correspond a 0 %. Toutes les valeurs decimales 
intermediaries permettent de definir des nuances de couleurs intermediaries. Les valeurs 
peuvent etre superieures a 1 et, meme, negatives. Dans le cas de valeurs negatives, la teinte 
modifiee bascule, dans le cercle chromatique, vers une nuance complementaire. Etant 
donne que le calcul multiplie les valeurs entre elles, une modification a priori benigne peut 
souvent aboutir a des surprises et notamment a l'assombrissement integral de l'image. 
Travaillez done en mesurant bien ces valeurs. 

Les valeurs de luminosite, ajoutees en fin de ligne, sont definies entre -255 et +255. Une 
valeur de 0 ne modifie pas la luminosite de l'image. Une valeur qui evolue vers -255 ajoute 
du noir a l'image. Une valeur qui evolue vers +255 ajoute du blanc. 

Ainsi, nous pouvons definir plusieurs types de reglages a partir de la meme structure. Si 
nous augmentons les valeurs de luminosite tout en passant les valeurs de teinte en negatif, 
nous saturons l'image. 
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Vous trouverez, ci-apres, differentes variations du filtre colorimetrique en fonction du type 
de reglage voulu. 

Filtre negatif (voir Figure 11.14) : 

• tableau1=tableau1 .concat( [-1 ,0,0,0,255] ) ; 

• tableau"! =tableau1 .concat( [0,-1 ,0,0,255] ) ; 

• tableau1=tableau1 .concat( [0,0,-1 ,0,255] ) ; 

• tableau 1 =tableau1 . concat ([0,0,0,1,0]); 



Figure 11.14 

Apercu du filtre 
negatif. 




Filtre Rouge : 

• tableaul =tableau1 . concat ( [-1,0,0,0,0]); 

• tableaul =tableau1 . concat ( [0,-1 ,0,0,-255] ) ; 

• tableaul =tableau1 . concat ( [0,0,-1 ,0,-255] ) ; 

• tableaul =tableau1 . concat ([0,0,0,1,0]); 
Filtre Vert : 

• tableaul =tableau1 . concat ( [-1 ,0,0,0,-255] ) ; 

• tableaul =tableau1 . concat ([0,-1,0,0,0]); 

• tableaul =tableau1 . concat ( [0,0,-1 ,0,-255] ) ; 

• tableaul =tableau1 . concat ([0,0,0,1,0]); 
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Filtre Bleu : 

• tableau1=tableau1 .concat( [-1 ,0,0,0,-255] ) ; 

• tableau1=tableau1 . concat ( [0,-1 ,0,0,-255] ) ; 

• tableau 1 =tableau1 . concat ( [0,0,-1,0,0]); 

• tableau 1 =tableau1 . concat ( [0,0,0,1,0]); 

Pour designer des filtres de couleurs complementaires RVB (ou primaires CMJ), inscrivez seu- 
lement une valeur de luminosite negative par tableau, au lieu de deux pour les filtres primaires : 

Filtre Cyan (complementaire du Rouge en RVB) : 

• tableau1=tableau1 . concat ( [-1 ,0,0,0,-255] ) ; 

• tableau 1 =tableau1 . concat ([0,-1,0,0,0]); 

• tableaul =tableau1 . concat ( [0,0,-1,0,0]); 

• tableaul =tableau1 . concat ( [0,0,0,1,0]); 
Filtre Magenta (complementaire du Vert en RVB) : 

• tableaul =tableau1 . concat ( [-1,0,0,0,0]); 

• tableaul =tableau1 . concat ( [0,-1 ,0,0,-255] ) ; 

• tableaul =tableau1 . concat ( [0,0,-1,0,0]); 

• tableaul =tableau1 . concat ([0,0,0,1,0]); 
Filtre Jaune (complementaire du Bleu en RVB) : 

• tableaul =tableau1 . concat ( [-1,0,0,0,0]); 

• tableaul =tableau1 . concat ( [0,-1,0,0,0]); 

• tableaul =tableau1 . concat ( [0,0,-1 ,0,-255] ) ; 

• tableaul =tableau1 . concat ( [0,0,0,1,0]); 

En appliquant des valeurs sur les autres parametres de couleur, a la place des 0 affiches 
habituellement, nous decalons radicalement les couleurs de 1' image dans le cercle chroma- 
tique tout en preservant cependant leur luminosite : 

Filtre melangeur de couleurs : 

• tableaul =tableau1 . concat ( [1 ,1,1 ,0,255] ) ; 

• tableau1=tableau1 .concat([0,1 ,0,0,255] ) ; 

• tableaul =tableau1 . concat ( [0,0, 1 ,0,255] ) ; 

• tableaul =tableau1 . concat ([0,0,0,1,0]); 



Le site Zoneflash.net presente les differents effets applicables a travers la matrice de couleurs a 
I'adresse suivante. D'autres tutoriels y sont egalement disponibles et plutot bien documentes : http:// 
www.zoneflash.net/tutoriaux/t038.php. 
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Dans notre exemple, le premier tableau applique une saturation en doublant les valeurs de 
teinte (oil coefl vaut2, soit200% de saturation). Pour compenser l'assombrissement 
obtenu de P image, nous reduisons egalement sa luminosite (ou coef 255 vaut 100) : 

// filtre saturation 

var coef 1 :Number=2; 

var coef255:int=-100; 

var tableaul :Array = new ArrayO; 

tableaul = new ArrayO; 

tableaul =tableau1 .concat( [coefl ,0,0,0 ] coef255] ) ; 
tableaul =tableau1 .concat( [0,coef1 ,0,0,coef255] ) ; 
tableaul =tableau1 . concat ( [0, 0,coef 1 , 0, coef 255] ) ; 
tableaul =tableau1 . concat ([0,0,0,1,0]); 

// 

var f iltreSaturation :ColorMatrixFilter=new ColorMatrixFilter(tableau1 ) ; 
contenu_mc .f ilters=[f iltreSaturation] ; 

Le tableau est ensuite introduit en parametre de la methode ColorMatrixFilter pour en 
faire un filtre colorimetrique. Pour appliquer le filtre colorimetrique a une selection, nous 
utilisons la propriete filters qui designe la matrice en question. 

Le principe est le meme pour restaurer les valeurs colorimetriques initiales. Nous isolons 
simplement Paction du filtre dans une fonction, associee a un evenement souris. Les para- 
metres du tableau reprennent alors des valeurs neutres : 

// filtre restauration 
var tableau2:Array = new ArrayO; 
tableau2=tableau2. concat ( [1,0,0,0,0]; 
tableau2=tableau2. concat ( [0,1,0,0,0]; 
tableau2=tableau2. concat ( [0,0,1 ,0,0] ; 
tableau2=tableau2. concat ( [0,0,0,1,0]; 
var f iltreNegatif :ColorMatrixFilter=new ColorMatrixFilter(tableau2) ; 
// 

restaurer_btn . addEventListener (MouseEvent .CLICK, appliquerFiltreNegatif ) ; 
function appliquerFiltreNegatif (evt:MouseEvent) { 
contenu_mc . filters=[f iltreNegatif ] ; 

} 

Resolution limite des images. Flash peut appliquer des flltres et traiter des images de resolution 
maximum de 16 777 216 pixels. Soit, pour une image de ratio I sur 4, faisant 8 192 pixels de large, 
Flash peut traiter une hauteur maximale de 2 048 pixels. 
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Dans le document "chll_apiGraphisme_5.fla", sur la scene principale, apparait un Movie- 
Clip qui contient plusieurs occurrences d'un clip de forme graphique, importee d' Illustrator 
(voir Figure 11.15). 
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Figure 11.15 

Apercu de la 
scene principale, 
image normale. 



En publiant le document, un filtre applique dynamiquement un effet different pour chaque 
occurrence d'objet (voir Figure 11.16). 

Figure 11.16 

Apercu du 
document publie, 
filtre applique par 
lot. 



Dans le scenario, le caique contenujnc accueille le MovieClip de toutes les occurrences 
d'arbres (voir Figure 11.17). 
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Figure 11.17 

Apercu du scena- 
rio de la scene 
principale. 
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Dans la fenetre Actions, nous pouvons lire le code suivant : 

// initialisation 

import flash .filters . ColorMatrixFilter; 



// actions 

// 

var coef 1 :Number; 
var coef255:int; 

var tableaul : Array = new ArrayO; 

var f iltreSaturation : ColorMatrixFilter=new ColorMatrixFilter(tableau1 ) ; 

// 

for (var i:Number=0; i<10; i++) { 
coef1=i*-0. 15; 
coef255=i*2+50; 
tableaul = new ArrayO; 

tableaul =tableau1 .concat( [coef 1 ,0,0,0, coef 255] ) ; 
tableaul =tableau1 .concat( [0,coef 1 ,0,0, coef 255] ) ; 
tableaul =tableau1 .concat( [ 0,0, coef 1 ,0, coef 255] ) ; 
tableaul =tableau1 . concat ([0,0,0,1,0]); 
f iltreSaturation=new ColorMatrixFilter(tableau1 ) ; 
contenu_mc.getChildAt(i) .f ilters=[filtreSaturation] ; 

} 

Ici, nous definissons les variables requises pour la generation du filtre. A la difference de la 
section precedente, nous isolons simplement le tableau et modifions dynamiquement ses 
valeurs, en integrant les donnees dans une boucle for. II nous suffit alors de recuperer la 
valeur d' iteration (i) pour demultiplier les valeurs passees en parametre du filtre. Nous uti- 
lisons egalement i pour appliquer, dynamiquement, chaque filtre a un objet du symbole 
contenu_mc, par ordre de la liste d'affichage (getChildAt (i)). 



Correction colorimetrique par interpolation 
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Dans le document "chl l_apiGraphisme_6.fla", nous retrouvons la meme structure que dans 
le document precedent. En le publiant, un filtre s' applique dynamiquement, mais il evolue 
ici de maniere autonome et en fonction de la position du pointeur en X (voir Figure 11.18). 



LE CAMPUS 




ActionScript 3 ET motion design 



Figure 11.18 

Apercu du 
document publie. 




Dans la fenetre de scenario, le caique actions affiche le code suivant : 

// initialisation 

import flash .filters . ColorMatrixFilter; 

// actions 

// 

var coef 1 :Number=-2; 
var coef255:int=100; 
var tableaul :Array = new Array(); 

var f iltreSaturation : ColorMatrixFilter=new ColorMatrixFilter(tableau1 ) ; 

// 

addEventListener(Event .ENTER_FRAME, animerFiltre) ; 
function animerFiltre (evt:Event) { 
if (coef1<2) { 

coef1=coef 1+0.01 ; 

} 

coef255=100+(mouseX/30) ; 
for (var i:Number=0; i<10; i++) { 
tableaul = new Array(); 

tableaul =tableau1 . concat ( [ coef 1 ,0, 0, 0, coef 255] ) ; 
tableaul =tableau1 . concat ( [0, coef 1 , 0, 0, coef 255] ) ; 
tableaul =tableau1 . concat ( [0,0, coef 1 , 0, coef 255] ) ; 
tableaul =tableau1 . concat ([0,0,0,1,0]); 
f iltreSaturation=new ColorMatrixFilter(tableau1 ) ; 
contenujnc . getChildAt (i) . f ilters=[f iltreSaturation] ; 

} 

} 

Dans ce programme, nous placons le nitre a l'interieur d'une fonction appelee par un ges- 
tionnaire de type ENTER_FRAME. II nous est alors possible de modifier dynamiquement les 
valeurs passees en parametre du tableau de la matrice de couleurs. 

La premiere valeur, coefl, est modifiee par incrementation. Une condition definit une 
limite cependant a 1' incrementation, de maniere a ce que la valeur n'excede pas 2 : 
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if (coef1<2) { 

coef 1=coef 1+0.01 ; 

} 

La seconde valeur, coef f 255, est modifiee en fonction de la position du pointeur dans le 
document : 

coef255=100+(mouseX/30) ; 




Animation de filtres. Reportez-vous egalement au Chapitre 3 pour en savoir plus sur la gestion de 
filtres avec des interpolations de type TweenMax. 



A retenir 

■ Nous pouvons appliquer des filtres colorimetriques pour modifier ponctuellement les images d'une 
composition. Pour cela, nous utilisons la classe ColorMatrixFilter. 

■ II est possible d'appliquer un filtre par lot, sur plusieurs occurrences d'objets, dynamiquement. Pour 
cela, nous placons le filtre dans une boucle for et utilisons la valeur d'iteration de i pour modifier 
les parametres du filtre et definir les objets a modifier. 

■ II est possible d'animer un filtre en le placant directement dans un gestionnaire de type 
ENTER_FRAME. Nous pouvons alors animer automatiquement le filtre par incrementation de valeur, 
mais aussi en fonction d'autres parametres comme la position du pointeur ou d'un objet (type 
curseur), par exemple. 



Imprimer un document SWF 

Vous pouvez imprimer directement tout type de contenu des lors que celui-ci possede un 
conteneur. II suffit d'invoquer la methode Print Job ( ) et de cibler le conteneur a imprimer 
pour lancer la fenetre d' impression automatiquement. 

Dans cette section, nous placons des instructions d'impression, sur le document precedent, 
de maniere a imprimer l'image affichee (voir Figure 11.19). 

Figure 11.19 

Apercu du 
document publie 
et execute pour 
I'impression. 
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Exemples > chl 1_apiGraphisme_7.fla 

Dans la scene principale du document "chl l_apiGraphisme_7.fla", nous distinguons le bouton 
d'impression et le conteneur contenu_mc. Dans la fenetre de scenario, ils sont toujours bien 
repartis vers les caiques. Dans la fenetre Actions, nous pouvons lire le code suivant : 

//imprimer 

imprimer_btn . addE vent List ener(MouseE vent .CLICK, imprimer) ; 
function imprimer(evt :MouseEvent) { 

var impression : PrintJob = new PrintJob( ) ; 
if (impression. start() ) { 

if (contenu_mc .width>impression . pageWidth) { 
contenu_mc .width=impression . pageWidth ; 
contenu_mc . scaleY=contenu_mc . scaleX; 

} 

impression. addPage(contenu_mc) ; 
impression. send() ; 

} 

} 

La classe d'impression emploie plusieurs methodes. D'abord, nous ouvrons la boite de dia- 
logue d'impression (start) et, seulement si celle-ci est rendue disponible par le systeme 
(if (impression . start ( )), alors, nous indiquons les pages a imprimer. 

Dans le bloc d' instructions, nous precisons les dimensions d'impression en hauteur et en 
largeur. Ces dimensions sont definies en pixels, bien que, en regie generale, l'impression se 
mesure, elle, en points. Les dimensions de la zone imprimable sont detectees automatique- 
ment et ne peuvent etre modifiees. Pour connaitre les dimensions ces valeurs, nous utilisons 
les proprietes pageWidth et pageHeight, en lecture seule, sur l'objet PrintJob(impres- 
sion . pageWidth). 

En l'occurrence, nous specifions que si la largeur du contenu a imprimer est superieure a celle 
de la zone d'impression, alors, nous l'adaptons a la zone d'impression 
(contenu_mc .width=impression . pageWidth). Ann de conserver toutefois l'homothetie du 
contenu a imprimer, nous ajoutons une instruction qui adapte egalement l'echelle de la hauteur 
du contenu en fonction de sa nouvelle largeur (contenu_mc . scaleX=contenu_mc . scaleY). 

Puis, a l'aide de la methode addpage(), nous specifions le conteneur a imprimer. Cette 
methode peut etre multipliee autant de fois que de conteneurs a imprimer. 

Le programme termine la gestion de l'impression en envoyant le tout dans la file d'attente 
de l'imprimante, avec la methode send ( ) . 

La classe printJob permet d'imprimer des conteneurs, mais aussi des zones bitmap telles 
que nous les avons definies dans ce chapitre. II sufht alors de remplacer le nom du conteneur 
par l'objet Bitmap a imprimer. 

Options d'impression. Pour le detail des commandes liees a 1'impression de documents SWF (mise 
a l'echelle, gestion des pages, affichage horizontal ou vertical), consultez aussi l'aide en ligne, pour 
une fois, limpide a ce sujet . http://livedocs.adobe.eom/flash/9.0_fr/ActionScriptLangRefV3/ 
flash/printing/Printlob.html. 
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A retenir 

■ II est possible d'imprimer un contenu Flash, meme isole dans un symbole, y compris si celui-ci a ete 
modifie en ActionScript. Nous utilisons pour cela la classe printJob ( ) . 

■ Lorsqu'un contenu est de dimension superieure a la zone d'impression, nous le redimensionnons a 
I'echelle de la zone d'impression a I'aide des proprietes pageWidth ou pageHeight. 

Appliquer une teinte aleatoire 

Dans de nombreuses circonstances, un contenu doit pouvoir changer de teinte, de maniere 
totalement opaque : convertir un bouton en lien visite, modifier la teinte d'une region survo- 
lee dans une carte geographique interactive, mettre a jour la couleur de l'ensemble des 
textes d'un site lorsqu'un nouveau theme artistique l'impose. 

Dans cette section, nous appliquons une couleur a notre conteneur central en cliquant sur un 
simple bouton. Nous specifions, en outre, une valeur aleatoire afin de designer une couleur 
differente a chaque clic (voir Figure 1 1.20). 



Figure 1 1 .20 

Apercu du 
document publie. 




Exemples > chl l_apiGraphisme_8.fla 

Le programme affiche dans la fenetre Actions est le suivant : 
//teinter 

teinte_btn . addE vent List ener(MouseEvent .CLICK, teinter) ; 
function teinter (evt :MouseEvent) { 
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var teinte:ColorTransform = new ColorTransf orm (); 
teinte . color=0xff f ff f *Math . random ( ) ; 
contenujnc .transform. colorTransf orm=teinte; 

} 

En cliquant sur le bouton teinte_btn, nous creons une nouvelle variable teinte qui mate- 
rialise un objet ColorTransf orm. C'est cet objet qui permet de vehiculer la teinte pour 
l'appliquer ensuite a tout type de contenu. 

Pour cet objet ColorTransf orm, nous modifions ensuite la propriete color, qui designe une 
couleur hexadecimale. 

Nous pourrions directement definir une couleur hexadecimale, mais nous la multiplions ici 
par une valeur aleatoire, generee par la classe Math . random ( ) , vue precedemment. 

Nous devons comprendre, au sujet de la valeur aleatoire, qu'une couleur hexadecimale est 
en fait une simple valeur numerique meme si elle semble composee de caracteres alphanu- 
meriques (voir note "Systeme hexadecimal"). En la multipliant par une autre valeur numeri- 
que, nous modifions par consequent la teinte affichee. Notons egalement que la valeur 
utilisee initialement est le blanc (f f f f f f ), car le blanc designe la valeur numerique maxi- 
male pour une teinte (255,255,255). En la multipliant par une valeur decimale aleatoire, 
comprise entre 0 et 1, nous obtenons toutes les nuances de couleur comprises entre 0,0,0 
(noir) et 255,255,255 (blanc). La valeur 0x indique, elle, au compilateur qu'il s'agit d'une 
valeur hexadecimale. C'est precisement ce qui lui permet de convertir une suite de lettres et 
de chiffres en valeur numerique. 



I 



Systeme hexadecimal. Les nombres sont generalement codes en decimal, c'est-a-dire en base 1 0. 
Les couleurs web sont, elles, codees en hexadecimal, soit sur une base 16 (ou 2 eleve deux fois au 
carre). Chaque valeur hexadecimale est done une valeur numerique definie sur 16 nites. Les six 
valeurs qui depassent la dizaine sont simplement transcrites sous la forme de caracteres texte, mais 
leur valeur est bien numerique. 



Pour terminer le programme, nous appliquons la teinte a l'objet en utilisant la methode 
colorTransf orm( ) de la propriete transform. C'est la methode colorTransf orm( ) qui 
copie les pixels crees. La propriete transform les applique a l'objet contenu_mc. 

La classe ColorTransf orm peut aussi affecter une zone partielle de l'objet. Pour en savoir plus 
sur cette option clairement exposee ici, consultez aussi l'aide en ligne a l'adresse suivante : 
http://help.adobe.com/fr_FR/AS3LCR/Flash_10.0/flash/display/BitmapData.html#color- 
Transform(). 

A retenir 

■ Pour modifier integralement la teinte d'un objet, nous utilisons la classe colorTransf orm. 

■ Pour modifier dynamiquement une valeur hexadecimale, il suffit de la multiplier par un coefficient 
numerique. 
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Creer un puits de couleurs 

L' affectation d'une teinte a un objet peut s'averer utile si Ton permet a l'utilisateur de pre- 
lever lui-meme cette teinte sur un nuancier ou sur une image de son choix. Dans cet exemple, 
nous placons un nuancier sur la scene principale et nous permettons a l'utilisateur d'y selec- 
tionner une couleur. Aussitot la couleur activee, Tillustration l'affiche (voir Figure 1 1.21). 

Figure 1 1.21 

Apercu du 
document publie. 




Exemples > chl l_apiGraphisme_9.fla 



Dans ce document, la scene affiche un symbole contenu_mc qui contient une serie de Movie- 
Clip. A droite, hors champ, apparait un autre symbole nomme couleurs_mc. A l'interieur, au 
dernier niveau d' imbrication, trois objets sont distinctement repartis vers les caiques. A 
l'arriere-plan, figure un rectangle transparent (de valeur alpha 0). Au-dessus, sur un troisieme 
caique, prend place la forme sur laquelle repose un nuancier de couleurs (voir Figure 1 1.22). 

Figure 1 1 .22 

Nuancier 
de couleurs. 
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Sur la scene principale, dans le caique actions (voir Figure 1 1.23), nous pouvons lire : 

// affichage de la palette 
var monlmage : BitmapData=new 

BitmapData (stage . stageWidth , stage . stageHeight , t rue , 0x00000000) ; 

monlmage. draw(couleurs_mc . getChildAt (0) ) ; 

var imageDepart :Bitmap=new Bitmap(monlmage) ; 

var capture : BitmapData=imageDepart . bitmapData; 

var miroir:Bitmap=new Bitmap(capture) ; 

addChild(miroir) ; 

//zone cliquable 

var initX : Number=couleurs_mc . zonejnc . nuancier_mc . x ; 

var initY : Number=couleurs_mc . zonejnc . nuancierjnc . y ; 

var initWidth : Number=couleurs_mc . zone_mc . nuancier_mc .width ; 

var init Height : Number=couleurs_mc . zonejnc . nuancierjnc .height ; 

// application de la couleur choisie 
addEvent Listener (MouseEvent . CLICK, pipette) ; 
function pipette(evt:MouseEvent) { 

if (mouseX>initX && mouseY>initY && mouseX<initX+initWidth && mouseY 

- <initY+initHeight) { 
// capturer 

var couleurDuPixel:uint=capture.getPixel(mouseX, mouseY) ; 
var couleur: *="0x"+couleurDuPixel . toString ( 16) ; 
// teinter 

var teinte:ColorTransform = new ColorTransf orm (); 
teinte . color=couleur; 

contenu_mc . transform. colorTransf orm=teinte ; 

} 




Pour comprendre le mecanisme d'un puits de couleurs, nous devons savoir que la methode 
getPixel utilisee pour prelever une couleur sur un objet, renvoie uniquement la couleur 
d'un objet BitmapData. Nous devons par consequent afficher cet objet avant de pouvoir y 
recuperer un pixel de couleur. C'est seulement ensuite que nous redistribuons le prele- 
vement effectue sur un autre objet, grace a un filtre de couleur. 

Dans cet exemple, nous utilisons le pointeur de la souris, pour cibler la couleur a prelever. 

Les premieres lignes de code activent l'objet BitmapData qui copie le contenu graphique 
du symbole couleursjnc situe hors champs. L' image capturee est reaffectee a un nouvel 
objet Bitmap ajoute a la liste d' affichage, au point d'origine du document : 
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// affichage de la palette 
var monlmage : BitmapData=new 

BitmapData (stage . stageWidth , stage . stageHeight , t rue , 0x00000000) ; 

monlmage. draw(couleurs_mc.getChildAt(0) ) ; 

var imageDepart :Bitmap=new Bitmap(monlmage) ; 

var capture : BitmapData=imageDepart . bitmapData; 

var miroir:Bitmap=new Bitmap(capture) ; 

addChild(miroir) ; 

II est important de souligner que la zone d'affectation du BitmapData est definie par les 
deux premieres valeurs de la methode BitmapData. Ainsi, pour reduire ou modifier la zone 
d'affichage du puits de couleurs, vous devez modifier egalement ces valeurs. 

Dans la suite du code, nous definissons la zone d' action pour le prelevement de la couleur. 
Cette zone reprend les coordonnees exactes et les dimensions du nuancier : 

//zone cliquable 

var initX : Number=couleurs_mc . zonejnc .nuancier_mc .x; 

var initY : Number=couleurs_mc . zonejnc .nuancier_mc . y ; 

var initWidth :Number=couleurs_mc . zone_mc.nuancier_mc. width; 

var init Height : Number=couleurs_mc . zonejnc .nuancier_mc. height; 

Enfin, apparait la fonction pipette qui execute le prelevement et l'affectation de la 
couleur : 

// application de la couleur choisie 
addEvent Listener (MouseEvent . CLICK, pipette) ; 
function pipette(evt:MouseEvent) { 

if (mouseX>initX && mouseY>initY && mouseX<initX+initWidth &&mouseY 
<initY+initHeight) { 
// capturer 

var couleurDuPixel:uint=capture.getPixel(mouseX,mouseY) ; 
var couleur: *="0x"+couleurDuPixel . toString ( 16) ; 
// teinter 

var teinte:ColorTransform = new ColorTransf orm (); 
teinte . color=couleur; 

contenu_mc . transform. colorTransf orm=teinte; 

} 

} 

Dans la fonction pipette, nous commencons par capturer la teinte sur la zone definie par 
l'objet BitmapData, et done, par le nuancier, grace a la methode getPixel ( ) . En parametre 
de cette methode, nous specifions les coordonnees du pointeur au moment du clic (mouseX 
et mouseY). 

La methode getPixel() preleve une couleur definie en RVB. Pour affecter cette valeur a 
un filtre colorimetrique, nous devons la convertir d'abord en valeur hexadecimale. 

La deuxieme instruction enregistre done cette valeur RVB en la precedant des caracteres 
zero et x, qui designent, en ActionScript, une valeur hexadecimale. Afin de convertir la 
valeur RVB en valeur egalement hexadecimale (en base de 16), nous utilisons le transty- 
page toString (16). 
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La seconde partie de cette fonction emploie la methode ColorTransf orm que nous connaissons 
deja, et applique la teinte a l'objet contenu_mc, present sur la scene. 

A retenir 

■ Pour prelever une couleur, nous utilisons la methode getPixel() qui fonctionne avec un objet 
BitampData. 

■ Pour que la couleur prelevee corresponde a I'endroit clique, nous passons, en parametre de la 
methode getPixel, les coordonnees X et Y du pointeur. 

■ Pour affecter enfin la teinte a un objet, nous appliquons le filtre colorimetrique ColorTransf orm. 



Synthese 

Dans ce chapitre, vous avez appris a modifier intrinsequement le contenu graphique des 
images et des formes vectorielles. Vous avez appris a optimiser la gestion de contenus gra- 
phiques en declinant certains objets par simple modification de couleur. Vous avez appris a 
recreer des effets d'optique deformante et a lisser les images affichees, meme lorsqu'elles 
sont interpolees. Vous avez enfin appris a realiser des animations de filtres en vue la creation 
de systemes graphiques elabores. 

Vous savez desormais traiter les images de facon a les valoriser et vous disposez d'outils 
declinables dans des interpolations animees (galeries d'images) ou pour des mises en forme 
plus specifiques, comme celle abordee au prochain chapitre. 
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Introduction 

L' impression de relief est creee par le cerveau. II analyse les deux images recues par chaque 
ceil et reconstitute le volume en superposant ces deux images. Pour creer des images en 
relief, nous devons done organiser Faffichage de sorte que le cerveau puisse lire deux sources 
d'images distinctes, dans un temps donne, le plus court possible. 

II existe differentes techniques de montage en relief. La plus accessible, tous supports 
confondus, demeure la technique de l'anaglyphe. L'anaglyphe se caracterise par la creation 
d'une image composee de couches separees : d'une part, le rouge et d'autre part, le vert et 
bleu. Le rouge est dissocie du vert et du bleu qui eux, restent superposes. Cette technique 
implique certes l'utilisation de lunettes rouges et bleues (ou rouges et vertes) pour l'inter- 
preter, mais peut se deployer aussi bien sur un ecran video, informatique, cinema, que sur le 
papier (exemples d'anaglyphes : http://www.dailymotion.com/video/xb6ez7_visitez- 
paris-en-3d-16_creation). 

Les autres techniques demeurent plus complexes et sont generalement reservees a des dis- 
positifs plus lourds a mettre en oeuvre, mais qui repondent a une exigence manifeste sur le 
choix et la qualite des couleurs. Ainsi, sont egalement rencontrees : 

• La technique des lunettes passives. Elle consiste a employer une paire de lunettes 
dont chaque verre affiche une trame soit horizontale soit verticale. L' image projetee est 
dissociee a travers 1' utilisation de deux projecteurs. Chacun affiche une image pour une 
trame donnee, en reproduisant la trame correspondant a l'oeil vise. 

• La technique des lunettes actives. Elle consiste a placer un ecran translucide a cris- 
taux liquides devant chaque oeil. Controle par un systeme de laser qui les relie a l'ecran, 
chaque verre alterne le passage de la lumiere pour ne laisser passer que l'image qui cor- 
respond a l'oeil vise. L'image est synchrone avec le rythme de balayage de la lunette. 
Ces lunettes requierent une legere alimentation electrique generalement assumee par 
l'utilisation de piles. Cette technique est favorisee dans la production audiovisuelle car 
elle ne limite pas le choix des couleurs lors de la capture, contrairement a l'anaglyphe 
pour lequel ce qui est trop rouge ou trop bleu, du fait du principe de couches separees, 
ne peut etre traite en relief. 

• La technique du reseau lenticulaire. Cette technique ne requiert pas de lunettes. II 
s'agit de placer sur un ecran une couche uniforme de lentilles convexes tres fines, col- 
lees les unes a la suite des autres. L'image affichee est decomposed en fines trames a rai- 
son de 8 a 12 trames differentes par lentille. II faut done capturer 8 a 12 images pour 
reconstituer un volume. C'est en se deplacant le long de l'ecran lenticulaire que le 
volume seulement reapparait, et a une distance bien definie. Ce dispositif complexe 
n'est utilise que pour les images fixes dans des zones d'exposition a faible recul et pour 
des usagers en mouvement (vitrines, galeries ou salons). 
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Dans ce chapitre, nous abordons la creation d' images en relief de type anaglyphe, avec Photos- 
hop, puis, la gestion de l'affichage de ces images en ActionScript. Nous presentons, en fin de 
chapitre, un moteur de rendu en relief, entierement dynamique, qui permet de convertir 
automatiquement en veritable objet en relief tout objet place dans un espace 3D dans Flash. 

Pour etudier les exemples de ce chapitre, il est recommande de disposer de lunettes pour 
anaglyphes, a films rouge et bleu, disponibles dans votre kiosque, chez votre marchand de 
jouet ou sur Internet. Certains opticiens et photographes proposent egalement ce type 
d'equipement (voir aussi http://www.alpes-stereo.com/lunettes.html). 



Pour creer un affichage en relief avec un effet le plus precis possible, nous devons prendre 
en compte un certain nombre d'elements. Dans le cadre de ce chapitre, nous en evoquons 
seulement les grands principes. Pour connaitre les techniques de creation d'images en relief 
de maniere detaillee, consultez le site de David Romeuf : http://www.david-romeuf.fr, tres 
largement documente sur le sujet. 

Pour vous aider a considerer toutefois certains principes elementaires, inherents a la creation 
d'images en relief, voici quelques recommandations : 

• Vous devez d'abord disposer de deux images du meme sujet, mais vous devez decaler le 
point de vue de chacune par rapport a l'autre. Vous reconstituez ainsi le point de vue des 
yeux qui est a l'origine de la vision en relief. 

• Lors de la prise de vue photographique, la distance entre les deux points de vue, pour 
reconstituer un tel effet, doit etre directement proportionnelle a la distance entre 
l'obturateur et le sujet vise. Ainsi, si vous photographiez un sujet de pres, la distance 
entre les deux points de vue doit etre egale a la distance entre deux pupilles d'ceil 
humain (6 a 10 cm). Si vous capturez, en revanche, un paysage lointain (une monta- 
gne, une architecture, un volume paysage ou urbain), vous devez separer les points de 
vue de plusieurs dizaines de centimetres, voir d'environ un metre pour les grands pay- 
sages (voir Figure 12.1). 

Figure 12.1 
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Dans la conception d'une image anaglyphe pour le relief, nous devons egalement eviter de 
capturer des objets a dominante coloree proche de celle de l'une des deux lentilles. Un objet 
de couleur rouge, par exemple, ne pourrait etre percu par l'une des deux lentilles et son 
volume ne pourrait done pas etre reconstitue. Evitez, par consequent, la mise en scene 
d'objets rouges et bleus, si vous travaillez avec la technique de l'anaglyphe, 

Pour realiser un anaglyphe, nous decalons d'abord les couches de couleurs rouge, vert et 
bleu, dans Photoshop. Une fois 1' image exportee pour le Web, nous pouvons en controler 
raffichage, dans Flash, avec ActionScript. 

Realiser un anaglyphe avec Photoshop 

Dans cette section, nous allons d'abord comprendre le principe de l'image jaillissante ou 
fenetre, a partir d'une image simple. Puis, nous verrons comment convertir deux prises de 
vue separees, en un seul anaglyphe, a l'aide de Photoshop. 

Le principe de l'image jaillissante ou fenetre 

Dans une image en relief, nous distinguons trois zones. La zone cadre, la zone jaillissante et 
la zone fenetre (voir Figure 12.2). 

Figure 12.2 

Definition des 
zones d'affichage 
pour le relief. 



La zone cadre represente la partie sans relief de l'image. La zone jaillissante est la partie qui 
se place devant le cadre, e'est-a-dire, la partie de l'image qui sort de l'ecran, au premier 
plan. La partie fenetre represente la partie situee a l'arriere-plan du cadre, e'est-a-dire, la 
partie en retrait et situee en profondeur de l'ecran. 

Le principe des trois zones est important, car selon la maniere dont nous creons l'anaglyphe 
dans Photoshop, selon le type de decalage apporte a la couche de couleur rouge, nous pou- 
vons choisir si l'image sera placee en retrait (fenetre) ou en avant (jaillissante) (voir 
Figure 12.3 et 12.4). 
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Dans cette section, nous allons convertir une image initialement "plate", en image fenetre, 
puis en image jaillissante. II n'est pas necessaire de disposer de deux images specifiques 
pour le relief pour effectuer cette manipulation. Toute l'image sera simplement projetee 
dans son integralite, soit vers l'arriere, soit vers l'avant. Sur ce principe, nous pouvons done 
deja imaginer pouvoir composer assez simplement, avec Photoshop, des images en relief a 
partir d'objets 2D detoures, sur des plans dissocies. Nous abordons cette technique un peu 
plus loin dans ce chapitre. 
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La zone fenetre 

Dans cette section, nous allons voir comment realiser une image de type fenetre. 



Exemples > relief > Lacoste.jpg 

1 . Lancez Photoshop. 

2. Ouvrez le document "Lacoste.jpg", situe dans le dossier "relief des exemples du livre. 
Cette image est normale et n'affiche pas de relief. Elle est en RVB et son unique caique 
est aplati (voir Figure 12.5). 



Figure 12.5 

Apercu de I'image 
Lacoste.jpg. 





3. Affichez la fenetre Couches en deroulant le menu Fenetre > Couches (voir Figure 12.6). 



Figure 12.6 
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La fenetre affiche un apercu des composantes colorimetriques de 1' image, a travers dif- 
ferentes couches RVB. La couche RVB affiche les composantes de l'image dans sa glo- 
balite. Les couches R, V et B affichent respectivement les couleurs rouge, vert et bleu 
de l'image. Vous pouvez cliquer sur chacune d'entre elles pour en distinguer les pro- 
prietes. 

Nous allons deplacer la couche Rouge a gauche, d'une dizaine de pixels, pour faire sortir 
l'image de la zone cadre et creer un effet Fenetre. 

1. Cliquez sur la couche Rouge. Elle est active. Les autres couches sont masquees. Dans 
l'image, la luminosite des valeurs de rouge est materialisee en noir et blanc (voir 
Figure 12.7). 




2. Pour deplacer la couche de 10 pixels vers la gauche, utilisez l'outil de deplacement 
(raccourci V). Selectionnez tous les pixels de la couche en faisant Ctrl+A (Windows) ou 
Cmd+A (Mac). 

3. Puis, appuyez simultanement sur la touche Maj+Fleche gauche du clavier. La couche 
Rouge est aussitot deplacee de 10 pixels vers la gauche. 

4. Desactivez la selection en faisant Ctrl+D (Windows) ou Cmd+D (Mac). 

5. Cliquez a nouveau sur la couche intitulee RVB pour afficher l'integralite de l'image. 
L'image en couleur affiche desormais un decalage entre le rouge et les composantes vert 
et bleu. L'image obtenue est un anaglyphe (voir Figure 12.8). 
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Apercu 

de I'anaglyphe. 




6. Recadrez eventuellement 1' image pour supprimer la marge situee a droite. 

7. Puis, observez 1' image a l'aide de lunettes rouge et bleue, en prenant soin de placer le 
filtre rouge sur l'oeil gauche. 

Vous pouvez maintenant voir une image projetee a l'interieur de l'ecran, dans la zone fenetre. 



La zone jaillissante 

Dans cette section, nous allons voir comment realiser une image de type jaillissante. 



Exemples > relief > Lacoste-chien.psd 



Le principe pour creer un volume jaillissant est identique a celui utilise pour le mode Fene- 
tre, sauf que nous deplacons la couche Rouge vers la droite ann de projeter l'image en pre- 
mier plan. Notez cependant que, parce que notre cerveau les analyse ainsi, l'effet jaillissant 
ne fonctionne qu'avec des elements qui representent des formes en volume, et non en pro- 
fondeur comme cette ruelle representee ici. Pour que l'effet fonctionne en mode jaillissant, 
nous utilisons done, dans notre exemple, un sujet detoure qui sera positionne au premier 
plan. 

1. Ouvrez le fichier Lacoste-chien.psd (voir Figure 12.9). 
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2. Activez le caique du chien. 

3. Directement, dans la fenetre Couches, cliquez sur la couche Rouge. 

4. Selectionnez tous les pixels (Ctrl+A pour Windows ou Cmd+A pour Mac) et deplacez- 
les de 10 pixels vers la droite a l'aide de l'outil Fleche et deplacement (raccourci V). 
Vous remarquez que le deplacement genere une frange blanche de 10 pixels a gauche 
du sujet (voir Figure 12.10). 



Figure 12.10 

Frange a gauche 
du sujet. 
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Nous pouvons la supprimer en gommant directement sur toutes les couches du caique 
chien en meme temps. 

5. Intervertissez la selection encore active en faisant Ctrl+Maj+i (Windows) ou 
Cmd+Maj+i (Mac). 

6. Cliquez d'abord sur la couche RVB pour atteindre 1' ensemble des composantes colori- 
metriques du caique. 

7. Selectionnez l'outil Gomme -raccourci E, comme Erase qui signifie gommer en 
anglais - (voir Figure 12.11). 

Figure 12.1 1 

Selection de l'outil 
Gomme. 



8. Puis, gommez la partie gauche du caique chien, materialisee a present en rouge (voir 
Figure 12.12). 



Figure 12.12 

Gommage de la 
frange a gauche. 
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9. Une fois la frange supprimee, desactivez la selection en faisant Ctrl+D (Windows) ou 
Cmd+D (Mac). 

10. Reprenez les lunettes rouge et bleue. Placez-vous a plus d'un metre de votre ecran. Le 
chien semble sortir de l'ecran tandis que la ruelle se prolonge en profondeur (voir 
Figure 12.13). 



Figure 12.13 

Reconstitution du 
resultat obtenu. 




Cette composition est affichee en relief, bien que chaque sujet ne soit pas capture en relief. 
Seuls les plans sur lesquels sont disposes les objets sont en relief. Pour realiser un veritable 
anaglyphe en relief, vous devez utiliser deux images qui representent le meme sujet, mais 
pris a quelques centimetres de decalage. 

Creer I anaglyphe a partir de deux images 

Nous abordons ici la creation de 1' anaglyphe, dans Photoshop, a partir de deux images 
prises sur le meme sujet avec un intervalle de 10 cm. 

Exemples > relief > relief.psd 

Ouvrez le document "relief.psd". La composition represente quelques fruits disposes autour 
d'un mug a the. La fenetre des caiques (Fenetre > Caiques) affiche deux images. Le caique 
du haut represente une prise de vue effectuee au niveau de l'ceil droit (voir Figure 12.14). 
Celui du bas represente le point de vue de l'ceil gauche (voir Figure 12.15). 




Pour realiser un anaglyphe a partir de deux images, nous placons les informations de la cou- 
che Rouge d'une premiere image a la place des informations de la couche Rouge de la 
seconde : 

1. Affichez la fenetre Couches et cliquez directement sur la couche Rouge. Puis, selection- 
nez tous les pixels de la couche en faisant Ctrl+A sous Windows, ou Cmd+A sous Mac 
(voir Figure 12.16). 
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2. Faites Ctrl+C (Windows) ou Cmd+C (Mac) pour copier la couche Rouge. 

3. Revenez dans la fenetre des caiques et activez maintenant l'autre calque"photo oeil gau- 
che". Pour voir ce caique place, masquez le caique precedent, situe au sommet la fenetre 
des caiques (voir Figure 12.17). 



Figure 12.17 
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4. Revenez dans la fenetre Couches et cliquez sur la couche Rouge pour l'activer. 

5. Selectionnez toute la couche en faisant Ctrl+A (Windows) ou Cmd+A (Mac). 

6. Puis, collez les informations Rouges du caique precedent en faisant Ctrl+V (Windows) 
ou Cmd+V (Mac). 

7. Activez enfin la couche globale RVB de ce caique pour en visualiser le rendu (voir 
Figure 12.18). 

La nouvelle couche Rouge est bien appliquee au document. Mais elle est trop decalee 
par rapport a l'image de gauche. Pour que le relief prenne, nous devons rapprocher les 
elements. A l'aide de l'outil de deplacement (raccourci V), deplacez la couche Rouge 
de 10 ou 20 pixels pour la recentrer (voir Figure 12.19). 




L'image est prete a etre recadree. Elle mesure 1 024 x 768 pixels. Nous allons la 
recadrer afin qu'elle occupe les memes dimensions que celles de notre document 
Flash : 

8. Activez l'outil de recadrage - raccourci C, comme Crop qui signifie rogner en anglais - 
(voir Figure 12.20). 
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Figure 12.20 

Selection de I'outil 
de recadrage. 




9. Dans les options, situees au sommet de l'interface de Photoshop, sous la barre de menu, 
inscrivez les valeurs : 800px, 530px et 72dpi (voir Figure 12.21). 



Figure 12.21 
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10. Recadrez l'image en centrant approximativement le sujet. Puis validez en cliquant sur 
Entree (voir Figure 12.22). 



Figure 12.22 

Apercu de la zone 
de recadrage. 
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11. Une fois l'image recadree, vous pouvez aussi l'aplatir. Faites Caiques > Aplatir l'image. 

12. Puis exportez pour le Web en faisant Fichier > Enregistrer pour le Web et les peripheri- 
ques. Choisissez une option de compression JPEG de qualite superieure ou egale a 60 
(voir Figure 12.23). Puis conflrmez l'enregistrement. 
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L'image est prete a etre importee dans Flash. 

Gerer un anaglyphe en ActionScript 

L'integration d'un anaglyphe dans Flash est relativement simple puisqu'il suffit d'importer 
l'image dans la scene. Mais il convient aussi de bien situer le type d'image dont nous dispo- 
sons selon le contexte d'execution. Si vous affichez une image jaillissante, il faut naturelle- 
ment la placer de preference au sommet de la liste d'affichage ou sur un caique place au- 
dessus des autres. Inversement, si l'image est de type fenetre, vous la placerez a l'arriere des 
autres objets de la scene. 

Cela signifie aussi que pour une image jaillissante, dans un contexte de scene en 3D, vous 
lui affecterez un index z paradoxalement inferieur a 0. Pour un type fenetre, vous applique - 
rez un index z superieur a 0. Dans Flash, nous rappelons le z augmente en allant vers le 
fond, tandis qu'il prend une valeur negative des qu'il se rapproche de l'ecran. Plus l'objet 
est proche de l'ecran et au premier plan, plus son index z diminue. 

Exemples > chl l_vraiRelief_l .fla 

Dans le document "chl l_vrairelief_l.fla", sur la scene, nous pouvons voir un MovieClip 
qui contient deux images. Une image classique est placee sur l'image 1 du scenario. La ver- 
sion en relief est placee sur l'image 2. Au-dessus, sur la scene principale, un bouton en 
forme de lunette 3D permet de basculer de l'une a 1' autre. 
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Dans la fenetre de scenario, au-dessus du caique Actions, nous distinguons le MovieClip 
composition_mc dubouton relief _btn (voir Figure 12.25). 



Figure 12.25 
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fenetre de 
scenario. 
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Dans la fenetre Actions, apparait le code suivant : 

compositionjnc.stopO ; 

// 

relief _btn . addE vent List ener (MouseEvent .CLICK, bascule rEnRelief ) ; 
function basculerEnRelief (evt :MouseEvent) { 
if (composition_mc .currentFrame==1 ) { 

composition_mc.nextFrame( ) ; 
}else { 

composition_mc .prevFrame( ) ; 

} 

} 

Dans ce programme, nous placons un stop au debut du MovieClip qui contient les deux 
images afin d'eviter qu'une animation ne se produise. 
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Plus bas, un ecouteur, attache au bouton relief_btn, lance le changement d'image en 
fonction de celle qui est active. L'image active est detectee, elle, grace a la methode current- 
Frame ( ). 

Dans cette condition, si l'image active est la premiere, nous basculons vers la seconde avec 
la methode nextFrame( ) qui designe l'image suivante. Nous revenons, en revanche, a la 
premiere image si c'est la seconde qui est identifiee, avec la methode prevFrame() qui 
designe l'image precedente. 

La video en relief. La technique du relief peut egalement etre appliquee a un flux video. Pour cela, 
vous devez disposer soit d'une composition video a plusieurs caiques et deplacer la couche Rouge de 
chaque caique a gauche ou a droite en fonction de I'effet souhaite (avec After Effects ou Motion par 
exemple). Soit vous devez partir de deux flux video distincts, representant le point de vise des deux 
yeux, comme pour des images fixes, et fusionner le tout en un seul flux en prenant la couche rouge 
de I'un que vous placez a la place de la couche rouge de I'autre. 

Dans After Effects, utilisez I'effet Perspective > Lunette 3D pour regrouper les flux video. Dans les 
reglages d'effets, source G designe le point de vue de I'ceil gauche, source D, le point de vue de 1'ceil 
droit. Balance couleur Rouge Bleu signifie vision 3D. Ajustez le Decalage de convergence (normale- 
ment, si les videos sont bien tournees, la valeur est proche de zero). Ajustez la Balance en fonction de 
la densite des lunettes (mesurable chez votre opticien). Puis, exportez la video obtenue en F4V ou en 
FLV et integrez-la simplement avec un composant FLVPlayBack, comme vu au Chapitre 7. 

A retenir 

■ Pour creer une image en relief, nous devons reproduire la vision humaine en capturant deux images 
dont les points de vise sont distants, I'un de I'autre, d'environ 6,5 cm pour un sujet proche, a pres 
d'l metre pour un grand paysage. 

■ Nous devons copier la couche Rouge d'une image pour remplacer celle de I'autre. 

■ L'image devient de type fenetre des lors que la couche Rouge est situee a gauche. 

■ L'image devient jaillissante des que la couche Rouge est placee sur la droite. 

■ II est possible de realiser des images en relief a partir d'images classiques. Pour cela, nous detourons 
chaque sujet et decalons la position de sa couche par rapport aux couches Rouge des autres cai- 
ques de la composition. 

■ II est possible, en ActionScript, de detecter la position courante d'une image de scenario, grace a la 
methode currentTarget ( ). 



Interface SWF en relief dynamique 

Nous venons de voir comment se constitue un contenu en relief. Au chapitre precedent, 
nous avons vu comment agir sur les couches RVB et Alpha d'une image, dynamiquement. 
Precedemment encore, nous avons aborde la gestion de la 3D avec l'index z. En combinant 
toutes ces techniques, nous pouvons construire une interface 3D en relief dynamique. 
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Le principe de l'interface en relief dynamique est de permettre le positionnement d'objets 
(textes, images, formes graphiques) dans un conteneur et de leur attribuer, pour chacun 
d'entre eux, un index z. En publiant le document, les couches Rouge, Vert et Bleu sont auto- 
matiquement separees en fonction de la profondeur de z. 

Dans cette section, nous allons etudier le mecanisme d'un moteur de rendu d'objets en vrai 
relief. 



Exemples > ch 1 2_vraiRelief_2.fla 



Dans le document "chl2_vrairelief_2.fla", sur la scene principale, apparait un MovieClip 
composition_mc, a l'interieur duquel sont positionnes des symboles. Ces symboles sont 
repartis de sorte que celui qui doit apparaitre au premier plan est situe naturellement au-des- 
sus des autres. Dans le code du caique Actions, que nous allons voir, un index z est egale- 
ment attribue pour chacun d'entre eux (voir Figure 12.26). N'oubliez pas que pour qu'un 
objet puisse disposer d'un index z, celui-ci doit etre un MovieClip. 



Figure 12.26 

Apercu de la 
scene principale. 





Lorsque le document est publie, si le bouton relief _btn situe a droite de l'ecran est active, la 
composition bascule presque instantanement en vrai relief. Le decalage de la couche Rouge est 
directement proportionnel a la position de l'objet sur l'index z (voir Figure 12.27). 

Dans la fenetre de scenario du document, au-dessus du caique f ond_mc, sont repartis : le 
symbole composition_mc, qui affiche tous les elements a projeter en relief ; au-dessus, le 
symbole zoneDepotRelief _mc, qui contient les objets utilises par le moteur de relief ; ainsi 
que le bouton relief _btn (voir Figure 12.28). 



Le Web en vrai relief 



379 




Figure 12.27 

Apercu du 
document publie, 
avec I'option relief 
activee. 




Figure 12.28 

Scenario de la 
scene principale. 
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Dans la fenetre Actions, nous pouvons lire le code suivant : 
// personnalisation 

var echelleZ:Number=400; 

var echelleRelief :Number=0.015; 

// 

function indexZ() { 
// toujours <0 

composition_mc . p1_mc . z=-700 ; 
composition_mc . p2_mc . z=-600 ; 
composition_mc . p3_mc . z=-500 ; 
composition_mc . p4_mc . z=-400 ; 
composition_mc . p5_mc . z=-300 ; 
composition_mc . p6_mc . z=-200 ; 
composition_mc . p7_mc . z=- 1 00 ; 

} 

relief _btn . addE vent List ener(MouseE vent .CLICK, bascule rEnRelief) ; 
function basculerEnRelief (evt:MouseEvent) { 

composition_mc . visible=f alse; 

moteurRelief ( ) ; 

} 
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// 




//+++++++++++++++++++ MOTEUR RELIEF (Arzhur CAOUISSIN) 

// 



+ / 
// 




// 



// tableauRouge 

var tableauRouge : Array = new Array(); 

var filtreRouge:ColorMatrixFilter=new ColorMatrixFilter(tableauRouge) ; 
tableauRouge = new ArrayO; 

tableauRouge=tableauRouge . concat ( [-1 ,0,0,0,255] ) ; 
tableauRouge=tableauRouge . concat ([0,-1,0,0,0]); 
tableauRouge=tableauRouge . concat ([0,0,-1,0,0]); 
tableauRouge=tableauRouge . concat ( [0,0,0,1,0]); 
f iltreRouge=new ColorMatrixFilter(tableauRouge) ; 
// tableauVert 

var tableauVert :Array = new ArrayO; 

var filtreVert:ColorMatrixFilter=new ColorMatrixFilter(tableauVert) ; 
tableauVert = new ArrayO; 
tableauVert=tableauVert . concat ( [-1,0,0,0,0]); 
tableauVert=tableauVert .concat ( [0, -1 ,0,0,255] ) ; 
tableauVert =tableauVert . concat ([0,0,-1,0,0]); 
tableauVert=tableauVert . concat ([0,0,0,1,0]); 
f iltreVert=new ColorMatrixFilter(tableauVert) ; 
// tableauBleu 

var tableauBleu : Array = new ArrayO; 

var filtreBleu:ColorMatrixFilter=new ColorMatrixFilter(tableauBleu) ; 
tableauBleu = new ArrayO; 
tableauBleu=tableauBleu . concat ([-1,0,0,0,0]); 
tableauBleu=tableauBleu . concat ([0,-1,0,0,0]); 
tableauBleu=tableauBleu . concat ( [0,0, -1 ,0,255] ) ; 
tableauBleu=tableauBleu . concat ([0,0,0,1,0]); 
f iltreBleu=new ColorMatrixFilter(tableauBleu) ; 
// tableauNoir 

var tableauNoir:Array = new ArrayO; 

var f iltreNoir:ColorMatrixFilter=new ColorMatrixFilter(tableauNoir) ; 
tableauNoir = new ArrayO; 

tableauNoir=tableauNoir . concat ([-1,0,0,0,0]); 
tableauNoir=tableauNoir. concat ([0,-1,0,0,0]); 
tableauNoir=tableauNoir. concat ([0,0,-1,0,0]); 
tableauNoir=tableauNoir. concat ([0,0,0,1,0]); 
f iltreNoir=new ColorMatrixFilter(tableauNoir) ; 

var largeurDonnees : Array=new ArrayO; 
var hauteurDonnees : Array=new ArrayO; 

function moteurRelief ( ) { 

for (var i:Number=0; i<composition_mc . numChildren ; i++) { 
largeurDonnees . push (composition_mc . getChildAt ( i) .width ) ; 
hauteurDonnees . push (composition_mc .getChildAt (i) . height) ; 



if ( i==composition_mc. numChildren- 1 ) { 
var boucle:Timer=new Timer(500, 1 ) ; 

boucle . addE vent List ener(TimerE vent .TIMER, lance rBoucle) ; 
boucle . start ( ) ; 
indexZ() ; 



// 
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function lancerBoucle(evt:TimerEvent) { 
af f ichageRelief ( ) ; 

} 

function aff ichageRelief ( ) { 

for (var i:Number=0; i<composition_mc . numChildren ; i++) { 

// 

var enveloppeImage:BitmapData=new BitmapData( 800, 600, false, 0x00000000) ; 
enveloppelmage . draw(composition_mc . getChildAt ( i) ) ; 
var pixelslmage : Bitmap=new Bitmap(enveloppelmage) ; 
var capture : BitmapData=pixelsImage . bitmapData; 

// 

var bitmapR:BitmapData=new BitmapData(largeurDonnees[i] , 
*-» hauteurDonnees[i] , true, 0x000000) ; 

var bitmapV:BitmapData=new BitmapData(largeurDonnees[i] , 
** hauteurDonnees [ i] , true, 0x000000) ; 

var bitmapB:BitmapData=new BitmapData(largeurDonnees[i] , 
t* hauteurDonnees[i] , true, 0x000000) ; 

var bitmapA:BitmapData=new BitmapData(largeurDonnees[i] , 
** hauteurDonnees [ i] , true, 0x000000) ; 

// 

var imageR:Bitmap=new Bitmap(bitmapR) ; 
var imageV:Bitmap=new Bitmap(bitmapV) ; 
var imageB:Bitmap=new Bitmap(bitmapB) ; 
var imageA: Bitmap=new Bitmap(bitmapA) ; 

// 

bitmapR.copyChannel(capture, capture . rect , new Point(0,0), 

* BitmapDataChannel. RED, BitmapDataChannel. ALPHA) ; 
bitmapV.copyChannel(capture, capture . rect , new Point(0,0), 
* BitmapDataChannel. GREEN, BitmapDataChannel. ALPHA) ; 
bitmapB.copyChannel(capture, capture . rect , new Point(0,0), 

* BitmapDataChannel. BLUE, BitmapDataChannel .ALPHA) ; 
bitmapA.copyChannel(capture, capture . rect , new Point(0,0), 
* BitmapDataChannel. ALPHA, BitmapDataChannel. ALPHA) ; 

// 

imageR.f ilters=[f iltreRouge] ; 
imageV.f ilters=[f iltreVert] ; 
imageB.f ilters=[f iltreBleu] ; 
imageA. f ilters=[f iltreNoir] ; 

// 

var Aff ichageRelief :MovieClip=new ZoneAff ichageRelief () ; 
zoneDepot Relief _mc . addChildAt (Aff ichageRelief , i) ; 
// la couche RVB 

Aff ichageRelief . coucheAlphajnc . addChild( imageA) ; 
imageA. x=composition_mc . getChildAt (i) . x ; 
imageA. y=composition_mc . getChildAt (i) . y ; 
//la couche Rouge 

Aff ichageRelief . coucheRougejnc . addChild ( imageR) ; 

imageR. x=composition_mc .getChildAt (i) . x+(composition_mc .getChildAt (i) . z) 
*echelleRelief ; 
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imageR .y=composition_mc . getChildAt (i) . y ; 
// la couche Bleu 

Af f ichageRelief . coucheVerte_mc . addChild ( imageV) ; 
imageV . x=composition_mc . getChildAt ( i ) . x ; 
imageV . y=composition_mc . getChildAt ( i ) . y ; 
//la couche Bleu 

Aff ichageRelief . coucheBleuejnc . addChild ( imageB) ; 
imageB . x=composition_mc . getChildAt ( i ) . x ; 
imageB . y=composition_mc . getChildAt ( i ) . y ; 

// 

imageR. scaleX=(composition_mc .getChildAt (i) . z) /echelleZ; 
imageR. scaleY=(composition_mc .getChildAt (i) . z) /echelleZ; 
imageV. scaleX=(composition_mc. getChildAt (i) .z) /echelleZ; 
imageV. scaleY=(composition_mc. getChildAt (i) .z) /echelleZ; 
imageB. scaleX=(composition_mc .getChildAt (i) . z) /echelleZ; 
imageB. scaleY=(composition_mc. getChildAt (i) .z) /echelleZ; 
imageA. scaleX= ( composit ion_mc . getChildAt ( i ) . z ) / echelleZ ; 
imageA. scaleY=(composition_mc. getChildAt (i) .z) /echelleZ; 

} 

} 

//+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ / 

//++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ 

// 

++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ / 

Le systeme est scinde en deux parties. La premiere donne acces aux elements personnalisa- 
bles directement en rapport avec les objets disposes dans la scene. La seconde constitue le 
moteur de rendu en relief. 

Dans la premiere partie, nous definissons d'abord les coefficients de deformation utilises par 
le moteur : 

var echelleZ:Number=400; 

var echelleRelief :Number=0.015; 

Le moteur fonctionne de la maniere suivante. Nous placons des objets dans l'espace 3D a 
l'interieur du symbole composition_mc. Limage projetee par ce conteneur est alors copiee 
en ActionScript, puis traitee, avant d'etre redistribute sur un autre conteneur : 
zoneDepotReliefjnc. Pendant le traitement, les couches sont separees et l'une d'entre 
elles, la Rouge, est decalee. 

Une fois le traitement termine, les couches sont distributes dans un MovieClip place dyna- 
miquement en ActionScript, a partir d'une occurrence exportee de la bibliotheque. Cette 
occurrence contient quatre MovieClip destines respectivement pour chacune des quatre 
composantes de couleur Rouge, Vert, Bleu et Alpha. 

Ann que les couches colorimetriques fusionnent correctement, nous avons applique, sur les 
deux premiers MovieClip, une propriete d'affichage de type Ajout (c'est un mode de fusion 
accessible depuis l'inspecteur de proprietes). Ainsi, lorsque les trois couches RVB sont 
superposees, sans decalage, 1' image est entierement reconstitute. Mais, pour reconstituer 
l'effet de relief, nous conservons naturellement le decalage de la couche Rouge. 

Le symbole Aff ichageRelief , disponible dans la bibliotheque, est exporte pour Action- 
Script avec le nom de classe ZoneAff ichageRelief . C'est lui qui sera distribue dans le 
symbole zoneDepotRelief _mc, autant de fois que d'objets a reconstituer. 
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Exporter un symbole pour ActionScript 

Pour exporter un symbole pour ActionScript en vu de realiser un interfacage dynamique, dans la 
bibliotheque (Ctrl+L pour Windows ou Cmd+L pour Mac), directement sur I'objet a exporter, faites 
clic-droit > Proprietes. Puis, dans la boite de dialogue, cochez la case Exporter pour ActionScript. 
Attribuez ensuite un nom de classe a I'objet sans caractere special, ni accent, espace ou signe parti- 
culier. En validant, le player fabriquera pour nous cette classe a la volee si celle-ci n'existe pas. 



La variable echelleZ permet de retranscrire l'echelle de deformation des couches, selon 
1' index z attribute a chaque objet : 

var echelleZ :Number=400; 

Ce coefficient est utilise pour recreer la profondeur, car en realite, dans notre programme, les 
proprietes 3D que nous avons affectees aux objets de la scene ne sont pas prises en compte 
lorsque le calcul d'affichage en relief est applique. Elle n'est appliquee qu'une fois les cou- 
ches separees. Les proprietes width et height utilisees, percoivent, en effet, des valeurs 
differentes lorsque deux couches alpha de memes dimensions sont placees a un index z dis- 
tinct. Une incoherence que nous contournons en activant l'affichage 3D uniquement lorsque 
le calcul de separation des couches est termine. Sans quoi les couches alpha de chaque objet 
auraient ete bien plus grandes que les objets eux-memes. 

La deuxieme variable, echelleRelief , est employee pour definir la valeur de decalage de 
la couche Rouge : 

var echelleRelief :Number=0. 015; 

Plus cette valeur est elevee, plus le decalage de la couche Rouge sera marque. 

A la suite, une fonction determine l'index z de chaque objet place dans le symbole 
composition_mc : 

function indexZ() { 
// toujours <0 

composition_mc.p1_mc.z=-700; 

composition_mc . p2_mc . z=-600 ; 
composition_mc . p3_mc . z=-500 ; 
composition_mc . p4_mc . z=-400 ; 
composition_mc . p5_mc . z=-300 ; 
composition_mc . p6_mc . z=-200 ; 
composition_mc.p7_mc.z=-100; 

} 

Le premier objet de la liste d'affichage, celui place en premier plan dans le symbole 
composition_mc, affiche un index le plus proche de l'ecran (-700). Les autres se rappro- 
chent progressivement de la valeur 0. Ces valeurs sont isolees dans une fonction de maniere 
a permettre au moteur de capturer les dimensions des objets avant de modifier leur index z, 
juste avant de lancer le mode d'affichage en relief. Afin de preserver les proportions 
d'echelle des objets en fonction de leur index z, nous limitons la gestion des objets a un 
index inferieur a 0, et done, a un relief jaillissant. 
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Ensuite, un gestionnaire d'evenements appelle le moteur de rendu, sur action de l'utilisateur : 

relief _btn . addE vent List ener(MouseEvent .CLICK, basculerEnRelief ) ; 
function basculerEnRelief (evt:MouseEvent) { 

compositionmc . visible=f alse ; 

moteurRelief ( ) ; 

} 

Nous masquons d'abord le symbole composition_mc qui affiche les objets dans un 
espace 2D. Puis, nous activons la fonction moteurRelief ( ) qui va placer, dans le clip vide 
zoneDepot relief _mc, situe au premier plan, les objets d'affichage en relief. 

Intervient ensuite le moteur de rendu. Le moteur genere, pour commencer, autant de filtres 
colorimetriques que de couches a isoler. Dans ce systeme, nous utilisons quatre couches. La 
couche Rouge permet de reconstituer le relief en le decalant d'une valeur proportionnelle a 
1' index z des objets. Les couches Vert et le Bleu sont separees, mais resteront superposees 
pour recreer la base de l'image. LAlpha, enfin, va permettre d'eviter que les couches, 
meme superposees, apparaissent legerement translucides. Souvenez-vous, nous avons 
applique un mode de fusion par Ajout pour les couches Roug et Vert. Or, la couche Bleu 
n'est pas necessairement entierement opaque. Cela depend de l'image. Si nous n'ajoutons 
pas une couche supplementaire qui reprenne l'ensemble des informations opaques de 
l'image, nous obtiendrons des images partiellement translucides. 

Dans un premier temps, nous definissons done les filtres de couleurs que nous appliquons 
plus loin, a chaque couche separee : 

// tableauRouge 

var tableauRouge:Array = new Array(); 

var filtreRouge:ColorMatrixFilter=new ColorMatrixFilter(tableauRouge) ; 
tableauRouge = new ArrayO; 

tableauRouge=tableauRouge . concat ( [-1 ,0,0,0,255] ) ; 
tableauRouge=tableauRouge . concat ([0,-1,0,0,0]); 
tableauRouge=tableauRouge . concat ([0,0,-1,0,0]); 
tableauRouge=tableauRouge . concat ([0,0,0,1,0]); 
f iltreRouge=new ColorMatrixFilter(tableauRouge) ; 

Nous declinons le principe pour chaque couche. A la suite, nous creons un tableau (Array) 
qui enregistre les dimensions des images, avant qu'elles ne soient projetees en relief. 
Le premier tableau stocke les largeurs et le second, les hauteurs : 

var largeurDonnees:Array=new Array(); 
var hauteurDonnees:Array=new Array(); 



Mecanisme d'un tableau (Array). Rappel : un tableau fonctionne un peu comme la definition 
d'une variable, a ceci pres que la structure peut implementer un nombre de valeurs indeterminees. 
Pour ajouter une valeur dans un tableau, nous employons la methode push(). En parametre de 
cette methode, nous specifions la valeur a ajouter. 



Dans notre exemple, les deux tableaux sont instancies en amont. C'est a travers une boucle 
for que nous recuperons les valeurs. Cette boucle permet d'executer autant d'enregistre- 
ments que le symbole compositionjnc affiche d'objets (en fonction de numChrildren) : 

function moteurRelief ( ) { 

for (var i:Number=0; i<composition_mc . numChildren ; i++) { 
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largeurDonnees . push (composition_mc .get ChildAt ( i) .width) ; 
hauteurDonnees . push (composition_mc . getChildAt ( i) . height ) ; 

// 

if (i==composition_mc.numChildren-1 ) { 
var boucle:Timer=new Timer(500, 1 ) ; 

boucle . addEvent Listener (Time rEvent .TIMER, lancerBoucle) ; 
boucle.start() ; 
indexZ( ) ; 

} 



function lancerBoucle(evt:TimerEvent) { 
af f ichageRelief ( ) ; 

} 

Des que la boucle est terminee (i==composition_mc.numChildren-1), nous activons le 
moteur de rendu avec l'appel de la fonction aff ichageRelief ( ). Dans ce dispositif, nous 
devons attendre que la boucle soit terminee, car le moteur utilise les donnees enregistrees 
par la boucle pour effectuer le calcul d'affichage. Si nous lancions le moteur avant d'avoir 
defini les valeurs necessaires, celui-ci ne pourrait fonctionner et retournerait une erreur. 
Pour garantir le delai, nous ajoutons meme un chronometre qui active la fonction seule- 
ment500 millisecondes apres l'enregistrement, soit une demi-seconde apres l'enregistre- 
ment. Pour nous assurer que le chronometre se declenche uniquement suite aux instructions 
lancees en debut de boucle, nous le placons a l'interieur de la boucle. 

A l'interieur du moteur de rendu (fonction aff ichageRelief ), plus bas dans le code, une 
autre boucle for, de meme structure, instancie autant d'images que d'objets dans le conteneur : 

var en veloppe Image : BitmapData=new BitmapData (800, 600, false, 0x00000000) ; 
en veloppelmage .draw( composition_mc. getChildAt (i) ) ; 

La methode BitmapData() genere d'abord une surface d'affichage a quatre canaux (Alpha, 
Rouge, Vert et Bleu). Puis, la methode draw( ) y place une capture de l'objet appele en 
parametre. La methode draw( ) dessine, pour ainsi dire, sur l'objet BitmapData, ce qui est 
appele en parametre de la methode draw( ) . 

Ensuite, nous definissons chaque image capturee en tant qu'objet, afin de permettre de 
les redistribuer ensuite dans d'autres conteneurs et de leur appliquer des nitres et des 
proprietes : 

var imageR:Bitmap=new Bitmap (bitmapR) ; 

var imageV:Bitmap=new Bitmap(bitmapV) ; 

var imageB:Bitmap=new Bitmap(bitmapB) ; 

var imageA:Bitmap=new Bitmap(bitmapA) ; 

A travers la methode copyChannel( ), nous recuperons la couche correspondant a une des 
quatre composantes colorimetriques. C'est, en somme, le noyau dur du moteur que nous 
definissons la : 

bitmapR . copyChannel(capture, capture. rect, new Point(0,0) , 
BitmapDataChannel.RED, BitmapDataChannel. ALPHA) ; 
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En parametre de cette methode, nous designons, respectivement : 

• L'objet a partir duquel nous voulons extraire une couche (capture). 

• La surface que nous voulons extraire (c'est toujours un rectangle, ici, la propriete rect 
lit la surface de l'image avec capture . rect). 

• Les coordonnees x et y du point d'origine de cette zone rectangulaire ; la couche 
composite concernee (RED, GREEN, BLUE ou ALPHA). 

• La propriete opaque ou transparente de l'image. Dans le cas d'une transparence, elle est 
definie avec la propriete BitmapDataChannel .ALPHA). 

Puis, nous appliquons les nitres definis en amont, sur chacune de ces couches, en fonction 
de leur teinte respective : 

imageR.filters=[filtreRouge] ; 

imageV.f ilters=[f iltreVert] ; 
imageB.f ilters=[f iltreBleu] ; 
imageA.f ilters=[f iltreNoir] ; 

Grace a ces nitres, les couches qui etaient extraites (par defaut noires) adoptent a present la 
teinte qui correspond a leur composante colorimetrique reelle. 

Pour chaque objet, nous placons dynamiquement, dans le symbole zoneDepotRelief _mc, 
une instance du symbole ZoneAf f ichageRelief disponible dans la bibliotheque et exporte 
pour ActionScript : 

var Aff ichageRelief :MovieClip=new ZoneAf f ichageRelief () ; 

zoneDepotRelief _mc . addChildAt (Aff ichageRelief , i) ; 

Pour chaque occurrence, nous l'ajoutons egalement a la liste d'affichage dans l'ordre qui 
correspond a l'empilement deja defini pour le symbole composition_mc (addChild- 
At (Aff ichageRelief , i) ). 

Plus bas, nous affichons les occurrences dans le conteneur zoneDepotRelief_mc, en les 
distribuant en fonction de la couche vehiculee. Les couches Rouge et Vert sont placees dans 
un conteneur avec le mode de fusion par Ajout deja actif. La couche Bleu est placee 
derriere. La couche Alpha, elle, se retrouve en dessous de toutes les autres et preserve l'opa- 
cite de chaque objet (voir Figure 12.29) : 

// la couche RVB 

Aff ichageRelief . coucheAlpha_mc .addChild(imageA) ; 

imageA.x=composition_mc .getChildAt (i) . x; 
imageA.y=composition_mc .getChildAt (i) . y ; 



Figure 12.29 

Ordre d'affichage 
des couches 
Alpha, Rouge, 
Vert et Bleu. 
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Nous en profitons pour ajuster aussi la position en X, principalement, pour la couche 
Rouge. Pour que l'effet de relief puisse etre visible, nous devons effectivement decaler 
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l'abscisse du Rouge par rapport aux autres couches. C'est done la que nous utilisons la 
variable echelleRelief qui nous aide a determiner l'ampleur de ce decalage : 

// la couche Rouge 

Af f ichageRelief . coucheRouge_mc . addChild ( imageR) ; 

imageR . x=composit ion_mc . getChildAt ( i) . x+ ( composit ionmc . getChildAt (i) . z) 
"echelleRelief ; 

imageR .y=composition_mc .getChildAt (i) . y ; 

La position X de la couche Rouge est ainsi proportionnelle a la valeur du x de chaque objet. 

Nous terminons la fonction en modifiant l'echelle scaleX et scaleY de chaque objet en 
fonction de son index x, pour recreer la deformation induite par la mise en relief des objets 
dans l'espace 3D. Rappelez-vous que l'affichage du rendu est determine a partir 
d'objets 2D, places dans composition_mc, et, a ce titre, nous oblige a deformer le tout en 
fonction de leur profondeur, que nous avons attribuee ailleurs, pour conserver 1' illusion de 
cette profondeur : 

imageR . scaleX= ( composit ionmc . getChildAt (i) . z) / -echelleZ; 
imageR . scaleY= ( composit ionmc . getChildAt (i) . z) / -echelleZ; 

La variable echelleZ, egalement definie en amont du programme, permet de gerer la defor- 
mation pour obtenir un effet plus ou moins accentue de la perspective. Une valeur elevee 
diminue la deformation et done, eloigne les points de fuite. 

A retenir 

■ II est possible d'extraire une couche de composante colorimetrique a I'aide de la methode copy- 
Channel(). 

■ II est possible realiser un site en relief dynamique a partir de proprietes distinctes de contenus 2D, 
s'ils sont repartis par exemple sur un index x. Le moteur de rendu en relief separe les couches RVBA 
et les redistribue alors en fonction de la profondeur x des objets. 

■ Lordre d'affichage des objets dans la composition est determinant pour le realisme du dispositif en 
relief. 



Synthese 

Dans ce chapitre, vous avez vu comment creer des images pour le relief avec la technique 
des anaglyphes. Vous avez appris a les integrer dans un document Flash. En decortiquant le 
mecanisme de fonctionnement de 1'affichage en relief, et a I'aide des techniques abordees 
dans les precedents chapitres, vous avez egalement appris a creer un systeme d'affichage 
dynamique qui permette de convertir, automatiquement, tout objet situe dans un espace 2D 
ou 3D, en relief. Vous etes en mesure de developper des systemes d'affichage pour tout type 
de contenu dont la volumetrie apporte du sens (architecture, bijoux, oeuvres d'art, design 
d'objets, produits high-tech, musees). 
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Introduction 

Les boutons proposes par defaut dans Flash offrent des fonctionnalites souvent en deca des 
besoins reels attendus en production, Par exemple, il est particulierement difficile de contro- 
ler, par ActionScript, des contenus distribues au sein de ce type d'objet. lis ne proposent pas 
non plus d'etat visite comme le ferait un simple hyperlien en HTML. En utilisant des sym- 
boles de type MovieClip, il est possible de realiser des systemes de navigation plus person- 
nalisables, plus souples a mettre en forme, et plus originaux. 

Dans ce chapitre, nous allons aborder l'utilisation de symboles de type MovieClip a travers 
differents dispositifs de navigation avances. 

Boutons MovieClip fixes avec etat active et visite 

Dans cette premiere section, nous vous proposons de realiser un menu avec differents bou- 
tons disposant, pour chacun d'eux, les etats survole (over), sortie (out), appuye (down), 
releve (up) et visite (visited). 

ActionScript 3 nous permet de centraliser les interactions au sein d'un meme gestionnaire 
grace aux proprietes target et currentTarget. Nous les utilisons dans cet exemple pour 
optimiser notre code. 

Nous presentons ici trois declinaisons du meme menu avec quelques variantes de codage. 
La premiere version execute tous les etats. La deuxieme version, aussi, mais elle utilise une 
structure conditionnelle de type Switch, plus souple pour des menus longs. La troisieme 
enfin aborde l'ergonomie en traitant les boutons en tant qu'elements actifs et non plus sim- 
plement visites. Lorsqu'une nouvelle rubrique est affichee, les boutons des autres entrees 
sont restaures. 

©Exemples > chl3_systemesNavigation_1 .fla 
Exemples > ch 1 3_systemesNavigation_l b.fla 
Exemples > ch 1 3_systemeslMavigation_l c.fla 

Les boutons visites 

Dans le document "chl3_systemesNavigation_l.fla", la scene principale affiche un sym- 
bole MovieClip de nom d' occurrence menu_mc (voir Figure 13.1). 

A l'interieur de ce symbole sont repartis, vers les caiques, trois boutons respectivement 
nommes boutonljnc, bouton2_mc et bouton3_mc. Sont egalement visibles : un filet et 
quelques formes graphiques ajoutees pour l'habillage (voir Figure 13.2). 
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Figure 13.1 

Apercu de la 
scene principale. 




Figure 13.2 

Apercu du 
scenario du 
MovieClip 
menu mc. 
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Dans le scenario de chacun de ces MovieClip, nous distinguons quatre caiques dont certains 
affichent des interpolations (voir Figure 13.3). 



Figure 13.3 

Apercu du 
scenario de 
chaque bouton 
MovieClip. 



» a DE] 5 10 15 20 25 30 35 40 45 50 


U labels . . □ 


Jo_over clo_down do_up do_visited do_QU1 [ 




^ slop . . □ 


□Is nls ds ds a 


texte • • □ 






i. , 1 , .1. , J. , .11 > i 








il -1 5 


1 * (1 » R 1 30 01ft 0 0. |4 | | 



Le caique du bas contient une serie d'animations placees les unes a la suite des autres. Le 
caique nomme texte affiche le libelle de chaque bouton. Le caique stop interrompt la tete 
de lecture avant chaque nouvelle animation, par la commande stop(). Enfin, le caique 
labels distribue une serie d'etiquettes (labels) qui nous permettent d'identifier chaque ani- 
mation en fonction de son role. Ces etiquettes permettent aussi de piloter par ActionScript le 
placement de la tete de lecture a ces endroits precis, lors du changement d'etat survenu pour 
le bouton (etat survole, sortie, etat appuye, etat relache et etat visite). 

Dans la scene principale, au-dessus du caique f ond_mc et menu_mc, apparait le caique 
Actions (voir Figure 13.4). 



Figure 13.4 

Apercu du 
scenario de la 
scene principale. 
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Dans le caique Actions, nous pouvons lire le code suivant : 



// actions 

//over 
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menujnc . addEvent List ener(MouseE vent . MOUSE_OVER, over) ; 
function over (evt :MouseEvent) { 
evt .target .gotoAndPlay ( "_over" ) ; 

} 

//down 

menujnc . addEvent List ener ( MouseEvent . M0USE_D0WN , down ) ; 
function down (evt :MouseEvent) { 

evt .target . gotoAndPlay ( "_down " ) ; 

evt .target . etatVisit=true ; 

// 

if (evt .target . name=="bouton1_mc" ) { 
trace( "action 1 ") ; 

} 

if (evt .target . name=="bouton2_mc" ) { 
trace( "action 2" ) ; 

} 

if (evt .target . name=="bouton3_mc" ) { 
trace( "action 3" ) ; 

} 

} 

//out 

menujnc . addEvent List ener (MouseEvent .MOUSE jOUT, out ) ; 
function out (evt :MouseEvent) { 

if (evt. target. etatVisit==true) { 

evt .target . gotoAndPlay ( " j/isited " ) ; 

} else { 

evt .target . gotoAndPlay ( "_out " ) ; 

} 

} 

//up 

menujnc . addEvent List ener ( MouseEvent . MOUSE JJP , up) ; 
function up (evt:MouseEvent) { 
evt .target .gotoAndPlay ( " jjp" ) ; 

} 

Pour apprehender le mecanisme du menu, nous devons d'abord comprendre que tous les 
boutons sont rassembles a l'interieur d'un symbole MovieClip nomme menujnc. Action- 
Script 3 nous permet de cibler, grace a la propriete target, chacun des objets qui capture 
l'evenement, dans un me me conteneur. Nous pouvons done automatiser le processus d'inte- 
ractivite avec plusieurs boutons reunis dans un clip, sans avoir a recreer de gestionnaire 
d'evenements pour chacun d'entre eux. 

Mais, nous souhaitons aussi executer un nombre d'evenements parfois contradictoires. Par 
exemple, nous souhaitons qu'un bouton survole affiche, en sortie, l'etat par defaut. Mais, 
nous aimerions aussi que, si ce bouton etait deja active, que ce soit un autre etat qui appa- 
raisse : l'etat visite. Pour ce faire, nous utilisons une variable et une structure condition- 
nelle, qui, selon l'objet active, va executer l'une ou l'autre des interpolations et ainsi 
permettre de resoudre cette pseudo-contradiction. 

Dans le programme, nous creons un premier gestionnaire d'evenements pour la definition 
de l'etat survole : 

//over 

menujnc. addEvent List ener (MouseEvent . MOUSE JDVER, over) ; 
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function over (evt :MouseEvent) { 
evt .target .gotoAndPlay ( "_over" ) ; 

} 

C'est bien le symbole menu_mc qui recoit l'ecouteur. Mais c'est bien l'occurrence de bouton 
survolee qui execute la fonction (evt . target). Dans cette fonction, nous lisons l'interpola- 
tion placee a l'etiquette nommee _over lorsque le pointeur survole le bouton 
(MOUSE_OVER). 

A la suite, un autre gestionnaire execute une fonction lorsque le pointeur est enfonce sur une 
occurrence de bouton (MOUSE_DOWN) : 

//down 

menujnc . addE vent List ener(MouseE vent .MOUSE_DOWN, down) ; 
function down (evt :MouseEvent) { 

evt .target . gotoAndPlay ( "_down " ) ; 

evt .target . etatVisit=true ; 

// 

if (evt. target. name=="bouton1_mc" ) { 
trace( "action 1 " ) ; 

} 

if (evt. target. name=="bouton2_mc" ) { 
trace( "action 2" ) ; 

} 

if (evt. target. name=="bouton3_mc" ) { 
trace( "action 3" ) ; 

} 

} 

Dans cette fonction, nous distinguons plusieurs actions. D'abord, l'animation qui corres- 
pond a l'etat _down est lancee : 

evt . target . gotoAndPlay ( "_down " ) ; 

Ensuite, nous creons une propriete etatVisit, pour chaque bouton active, que nous pas- 
sons sur true. Cette propriete nous sert a verifier si l'objet a ete clique ou non. Selon sa 
valeur, nous definissons plus loin le type d'etat a afficher en sortie ("_visited" ou 
"_sortie"). 

Nous ajoutons ensuite des conditions qui permettent de lancer telle ou telle action, selon le 
bouton clique. Nous verifions, par exemple, que le bouton clique se nomme bouton 1_mc. 
Dans ce cas, un texte en rapport s'affiche dans la fenetre de sortie. 

C'est la definition de differentes structures conditionnelles qui nous epargne d' avoir a creer 
un nouveau gestionnaire d'evenements propre a chaque bouton. L' ensemble des actions du 
menu est centralise dans chacune de ces conditions. 

Ensuite, un gestionnaire affiche les actions lorsque le pointeur sort des boutons (M0USE_0UT) : 
//out 

menujnc . addEvent List ener(MouseE vent. MOUSE_OUT, out ) ; 
function out (evt:MouseEvent) { 

if (evt. target. etatVisit==true) { 

evt .target . gotoAndPlay ( "_visited " ) ; 

} else { 

evt .target . gotoAndPlay ( "_out " ) ; 

} 

} 
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Dans cette fonction, nous definissons deux actions. La premiere active 1' interpolation situee 
a Tetiquette _visited si, et uniquement si, la valeur de la propriete etatVisit du bouton 
clique est passee sur true, c'est-a-dire, si le bouton, ou la rubrique associee a ce bouton, a 
bien ete visitee. 

Si le bouton pour lequel le pointeur sort n'est pas le bouton clique, la seconde action appelle 
T interpolation de sortie simple (_out). 

La structure Switch... case 

Vous trouverez egalement, dans les exercices du livre, le fichier 
"chl3_systemesNavigation_lb.fla". Ce document propose une version alternative de la struc- 
ture conditionnelle. La fonction intitulee down emploie ici une instruction switch... case, au 
lieu de if : 

//down 

menujnc . addEvent Listener ( MouseEvent . M0USE_D0WN , down ) ; 
function down (evt :MouseEvent) { 

evt .target . gotoAndPlay ( "_down " ) ; 

evt .target . etatVisit=true ; 

// 

switch (evt. target. name) { 
case "bouton1_mc" : 

trace ( "action 1 " ) ; 

break; 
case "bouton2_mc" : 

trace ( "action 2" ) ; 

break; 
case "bouton3_mc" : 

trace ( "action 3" ) ; 

break; 
default : 

trace( "ni 0, 1 , ou 2" ) ; 

} 

} 

Le principe de 1' instruction switch est similaire a une structure if , a la difference que nous 
verifions une seule fois l'objet de la la condition (switch (evt . target . name)). Selon la 
valeur identifiee apres l'attribut case, nous specifions ensuite les actions a executer. Les 
actions sont placees apres les deux points et se terminent toujours par l'instruction break. 
Une instruction default permet d'executer une autre action lorsque la condition n'est verifiee 
par aucun attribut case. 

Cette structure est particulierement adaptee pour les systemes dont la condition a verifier est 
toujours du meme type, comme verifier une valeur portee par une variable, et y associer un 
comportement en fonction du resultat obtenu. 
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Les boutons actives 

Un troisieme document, nomme "chl3_systemesNavigation_lc.fla", propose un systeme de 
navigation pour lequel chaque lien affiche l'etat actif lorsque le bouton vient d'etre enfonce. 
Mais cet etat est desormais restaure des qu'un autre bouton reprend le focus. 

Dans ce document, nous pouvons lire le code suivant : 

// initialisation 

var actif : *=null; 

// actions menu 

//down 

menujnc . addEvent Listener ( MouseEvent . M0USE_D0WN , down ) ; 
function down(evt:MouseEvent) { 
if (evt.target!=actif ) { 
//up 

if (actif !=null) { 

actif .gotoAndPlay ( "_up" ) ; 

} 

/ /visited 

actif=evt. target; 

actif . gotoAndPlay ( "_visited " ) ; 

} 

switch (evt. target. name) { 
case "bouton1_mc" : 

trace( "action 1 " ) ; 

break; 
case "bouton2_mc" : 

trace( "action 2" ) ; 

break; 
case "bouton3_mc" : 

trace ( "action 3" ) ; 

break; 
default : 

trace( "ni 0, 1 , ou 2" ) ; 

} 

} 

//over 

menujnc . addEvent List ener(MouseE vent .MOUSE_OVER, over) ; 
function over(evt :MouseEvent) { 
if (evt.target!=actif ) { 

evt .target . gotoAndPlay ( "_over" ) ; 

} 

} 

//out 

menujnc . addEvent Listener (MouseEvent .MOUSE jOUT, out) ; 
function out(evt:MouseEvent) { 
if (evt.target!=actif ) { 

evt .target . gotoAndPlay ( "_out " ) ; 

} 

} 
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Dans ce programme, nous initialisons d'abord une variable "interrupteur" que nous avons 
nommee actif : 

// initialisation 

var actif :*=null; 

Le type etoile (*) designe tout type, sans en privilegier un en particulier. La valeur null 
assure qu'elle ne permettra aucune action tant que nous ne l'aurons pas modifiee. 

La fonction down commence par modifier cette valeur lorsqu'un bouton est enfonce 
(actif =evt . target). Les autres fonctions ainsi que les structures conditionnelles de celle- 
ci, verifient alors que le bouton clique n'est pas celui prealablement active. Selon la valeur 
detectee, elles lancent ou non les interpolations d'entree (_over) ou de sortie (_out) des 
boutons du menu. 

Menus avec des symboles boutons. II est possible de realiser dynamiquement un menu a partir 
de symboles boutons et de clbler les contenus qui y sont distribues. Nous n'abordons pas cet aspect 
ici. Ces techniques sont decrites en detail au Chapitre 7 de I'ouvrage de Thibault Imbert, Pratique 
d'ActionScript 3, aux editions Pearson. 

A retenir 

■ Les boutons realises en MovieClip offrent plus de souplesse de manipulation et de valeur ajoutee 
creative, qu'un bouton classique de la classe Button. II est notamment possible d'y introduire de 
nombreuses animations et de les controler facilement par ActionScript. 

■ Pour creer un etat visite sur un bouton clique, nous devons ajouter une condition qui verifie si le 
bouton active est celui enregistre. Dans ce cas, nous jouons I'animation en rapport. Le cas echeant, 
nous specifions une autre interpolation. 

■ En ActionScript 3, grace a la propriete target, il est facile de centraliser les actions de tout un menu 
au travers d'un seul gestionnaire d'evenements. Pour distinguer neanmoins les actions de chaque 
bouton, nous utilisons des structures conditionnelles. 

■ Une structure conditionnelle de type Swich est plus adaptee qu'une structure if, lorsque la condi- 
tion a verifier est toujours la meme. 



Boutons MovieClip animes et interfacables 

La creation de boutons classiques consiste a limiter la surface d'affichage a leur libelle. Les 
boutons de type interfacables sont des MovieClip qui executent une animation et transforme 
la surface du bouton en fenetre de contenu. Les elements distribues dans cette fenetre 
deviennent a leurs tours interactifs, mais ne doivent pas entrer en conflit avec les actions 
placees justement sur ce conteneur (voir Figure 13.5). 

La difficulte de cet exemple repose sur la capacite a rendre les actions des elements ajoutes, 
dans le conteneur MovieClip, independantes des actions du conteneur lui-meme. Si le bou- 
ton qui deploie cette fenetre possede ses propres actions d'ouverture et de fermeture. 
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Figure 13.5 

Bouton interface. 



II devient effectivement plus complique d'ajouter, dans un objet deja interactif, d'autres 
objets egalement interactifs. 

Ann de permettre de placer des symboles cliquables a l'interieur d'autres symboles deja 
cliquables, nous devons considerer que : 

• Les objets places au-dessus des autres sont toujours prioritaires sur les actions a exe- 
cuter. 

• Les objets doivent pouvoir etre identifies au moment precis oil des actions leur sont 
attributes. Ou bien, il n'est pas possible de cibler un objet qui n'apparait pas dans la 
scene au moment ou celui-ci est invoque. 

• En ActionScript 3, l'ensemble des objets enfants d'un conteneur remonte au conteneur 
principal les interactions eventuellement interceptees. 

Pour ajouter des objets interactifs dans un MovieClip, lui-meme interactif, nous procedons 
de l'une des deux manieres suivantes. Soit nous placons tous les objets interactifs sur la pre- 
miere image du scenario de leur conteneur, quitte a les rendre invisible (propriete visi- 
ble=f alse) arm qu'ils n'apparaissent pas au lancement de l'application et, qu'ils ne soient 
pas cliquables. Soit nous les isolons sur une image du scenario du conteneur, la oil effecti- 
vement ils doivent apparaitre, mais nous sommes alors contraints de placer les actions de 
ces objets a ce meme emplacement, dans le scenario. 

Dans cette section, nous abordons les deux solutions. 



h 1 



Difference entre les proprietes alpha et visible. 

La propriete alpha (nomDuSymbolejnc . alpha=0) rend les objets transparents mais toujours actifs. 
La propriete visible (nomDuSymbolejnc. visible=f alse) les rend invisibles et inactifs. L'alpha se 
definit par une valeur decimale comprise entre 0 et 1 . La visibilite se definit par une valeur booleenne 
(true ou false). 
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Methode avec les actions dans le scenario du lien 

Nous presentons d'abord la solution qui consiste a placer les actions des liens imbriques, 
dans les liens eux-memes. Cette technique est la plus simple a apprehender. Elle permet de 
placer les objets dans le scenario uniquement lorsqu'ils doivent etre actifs. Elle convient 
parfaitement pour des actions localisees, comme la lecture du scenario a partir d'un objet 
ajoute localement, sur une image-cle isolee, par exemple. 

/0^l Exemples > ch 1 3_systemesNavigation_2.fla 
Exemples > ch 1 3_systemesNavigation_2b.fla 

Dans le document chl3_systemesNavigation_2.fla, nous pouvons voir une interface oil des 
liens, en forme de poids, sont positionnes au-dessus de la partie gauche du decor. Un 
MovieClip canalise ces objets et porte le nom d'occurrence menu_mc (voir Figure 13.6). 

Figure 13.6 

Apercu de la 
scene principale. 




A Finterieur de ce menu, trois symboles de type MovieClip, respectivement nommes 
boutonljnc, bouton2_mc et bouton3_mc sont repartis distinctement vers les caiques (voir 
Figure 13.7). 



Figure 13.7 

Scenario a I'inte- 
rieur du menu. 
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A 1'interieur du symbole bouton1_mc, nous accedons maintenant a une animation ou la sur- 
face du lien s'etend jusqu'a dessiner une fenetre. Cette animation prend fin a l'image 24 oil 
la fenetre est totalement deployee. Le reste de 1' animation represente la fermeture de cette 
fenetre. La lecture de cette animation est controlee par des actions. Un stop, place a 
l'image 1 et 24, interrompt la lecture. C'est uniquement, lorsque la tete de lecture atteint 
l'image 24, que de nouveaux boutons apparaissent a l'ecran (voir Figure 13.8). 



Figure 13.8 
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Dans la fenetre de scenario du bouton 1 , un autre objet apparait egalement a l'image 24, un 
movieClip transparent nomme zone0ut_mc et de propriete alpha a 0 %. C'est lui qui permet 
d'activer la fermeture de la fenetre, lorsque le pointeur le depasse. 

Afin d'activer l'ouverture animee de cette fenetre, nous avons place des actions sur la scene 
principale, en direction de l'objet bouton1_mc lui-meme. Pour que les liens situes locale- 
ment a l'image 24 du symbole bouton1_mc soient actifs, nous avons place d'autres actions 
directement dans ce scenario, a l'image 24. 

Les autres MovieClip boutons de ce document ne contiennent pas de liens isoles. lis ont ete 
mis en forme uniquement pour illustrer le mecanisme, dans un systeme plus global, avec 
plusieurs entrees de menu. Leur scenario ne possede pas les caiques menuBouton1_mc ni 
zone0ut_mc (voir Figure 13.9). Mais le mecanisme adopte pour le premier bouton pourrait 
y etre reproduit. 

Figure 13.9 

Scenario a 1'inte- 
rieur des bou- 
tons 2 et 3. 



Les actions du caique de la scene principale sont les suivantes : 

// initialisation 

var boutonActif :String; 

// actions 

//over 

menujnc . addEvent List ener(MouseE vent .M0USE_0VER, over) ; 
function over (evt :MouseEvent) { 
if (evt. target. currentFrame==1 ) { 
evt .target . gotoAndPlay ( "_over" ) ; 

} 
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//down 

menujnc . addEvent List ener(MouseE vent .M0USE_D0WN, down) ; 
function down (evt :MouseEvent) { 
boutonActif =evt .target . name ; 

// 

if (evt .target . name=="bouton1_mc" ) { 
trace( "action 1 " ) ; 

} 

if (evt .target . name=="bouton2_mc" ) { 
trace( "action 2" ) ; 

} 

if (evt .target . name=="bouton3_mc" ) { 
trace( "action 3" ) ; 

} 

} 

//out 

menujnc . addEvent List ener(MouseE vent .MOUSE_OUT, out) ; 
function out (evt :MouseEvent) { 

if (evt .target . name !="bouton1_mc" ) { 
if (evt. target. currentFrame==24) { 
evt .target . gotoAndPlay ( "_out " ) ; 

} 

} 



Les actions localisees dans le symbole bouton1_mc, a l'image 24, sont les suivantes : 

stop(); 

// 

menuBouton1_mc . addEvent List ener(MouseE vent .CLICK, act ionsMenuBoutonl ) ; 
function actionsMenuBoutonl (evt :MouseEvent) { 
if (evt .target . name=="lien1_mc" ) { 
trace( "action 1 du menu bouton 1"); 

} 

if (evt .target . name=="lien2_mc" ) { 
trace( "action 2 du menu bouton 1"); 

} 

if (evt .target . name=="lien3_mc" ) { 
trace( "action 3 du menu bouton 1"); 

} 

} 

// 

zoneOut_mc . addE vent List ener (MouseEvent .MOUSE_OUT, sortirBoutonl ) ; 
function sortirBoutonl (evt:MouseEvent) { 
play() ; 

} 

Dans la fenetre d' actions de la scene principale, nous associons une fonction sur le conte- 
neur menujnc qui accueille les trois boutons : 

// actions 

//over 

menujnc. addE vent List ener (MouseEvent . MOUSE JDVER, over) ; 
function over (evt :MouseEvent) { 
if (evt. target. currentFrame==1 ) { 
evt .target . gotoAndPlay ( "_over" ) ; 

} 

} 
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Dans cette fonction, nous activons la lecture du scenario du bouton clique, uniquement si 
T image courante du bouton clique est 1' image 1. Ceci evite que 1' animation soit relancee 
intempestivement lorsque l'utilisateur navigue au sein de la fenetre, si elle est deployee. 

Plus bas, dans la fonction associee a l'evenement M0USE_D0WN, nous reprenons le meme 
type d' actions que celles presentees dans la section precedente. 

En revanche, dans le gestionnaire M0USE_0UT, nous precisons que Taction de restauration de 
l'etat du bouton ne peut avoir lieu que si le nom du bouton actif est different de celui qui 
contient d'autres liens. Autrement dit, Taction de restauration n'apparait que pour les liens 
simples. L' action de fermeture de la fenetre, dans notre exemple, est controlee directement 
a Timage 24, dans le scenario du MovieClip bouton : 

//out 

menu_mc . addEvent List ener(MouseE vent .MOUSE_OUT, out ) ; 
function out (evt :MouseEvent) { 

if (evt .target . name !="bouton1_mc" ) { 
if (evt. target. currentFrame==24) { 
evt. target. gotoAndPlay( "_out" ) ; 

} 

} 

} 

Dans le scenario du MovieClip, a Timage 24, nous affectons d'abord un ecouteur sur 
Tenveloppe menuBouton1_mc qui rassemble les trois sous-entrees locales. Pour chaque lien 
de ce conteneur, nous definissons une action trace specifique : 

menuBouton1_mc. addEvent List ener (MouseEvent .CLICK, actionsMenuBoutonl ) ; 
function actionsMenuBoutonl (evt :MouseEvent) { 
if (evt .target . name=="lien1_mc" ) { 
trace( "action 1 du menu bouton 1"); 

} 

if (evt .target . name=="lien2_mc" ) { 
trace( "action 2 du menu bouton 1"); 

} 

if (evt .target . name=="lien3_mc" ) { 
trace( "action 3 du menu bouton 1"); 

} 

} 

II n'y a pas de contradiction avec le conteneur principal, car ces objets sont situes au premier 
plan, et le gestionnaire cible bien un conteneur different du conteneur principal. 

Plus bas, une autre action est ajoutee et controle la fermeture de la fenetre : 

// 

zoneOutjnc. addEvent List ener (MouseEvent .MOUSE_OUT, sortirBoutonl ) ; 
function sortirBoutonl (evt:MouseEvent) { 
play() ; 

} 

L' action cible tout simplement la forme transparente situee au pourtour de la fenetre. Lors- 
que cette zone apparait dans la scene, le pointeur est deja sur la partie centrale. L'evenement 
M0USE_0UT permet done d'activer la fermeture animee de la fenetre, uniquement si l'utilisateur 
sort de la zone transparente, par Texterieur. 
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Des instructions de neutralisation de MovieClip et de boutons sont proposees en fin de 
chapitre. lis offrent une autre alternative a la gestion de contenus imbriques. 

Dans le document "chl3_systemesNavigation_2b.fla", une declinaison de cet exemple est 
proposee, a partir de l'instruction switch. Ce qui donne, pour la fonction down de la scene 
principale : 

//down 

function down (evt :MouseEvent) { 
boutonActif =evt .target . name ; 

// 

switch (evt. target. name) { 
case "bouton1_mc" : 

trace ( "action 1 " ) ; 

break; 
case "bouton2_mc" : 

trace ( "action 2" ) ; 

break; 
case "bouton3_mc" : 

trace ( "action 3" ) ; 

break; 
default : 

trace( "ni 0, 1 , ou 2" ) ; 

} 

} 

Pour la fonction placee a l'interieur du symbole : 

menuBouton1_mc . addEvent List ener(MouseE vent .CLICK, act ionsMenuBoutonl ) ; 
function actionsMenuBoutonl (evt :MouseEvent) { 
switch (evt. target. name) { 
case "lien1_mc" : 

trace( "action 1 du menu bouton 1"); 
break; 
case "lien2_mc" : 

trace( "action 2 du menu bouton 1"); 
break; 
case "lien3_mc" : 

trace( "action 3 du menu bouton 1"); 
break; 
default : 

trace( "aucun" ) ; 

} 

} 



Methode avec les actions sur la scene principale 

Une declinaison du precedent document est proposee dans le fichier 
"chl3_systemesNavigation_2c.fla". Ce document prend en charge la gestion des liens 
imbriques en placant le code directement sur la scene principale, ce qui rend plus facile la 
liaison des donnees entre fonctions et simplifie, entre autres, la recuperation de valeurs, 
T activation d' autres fonctions, la centralisation du code et sa maintenance. 
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Exemples > ch 1 3_systemesNavigation_2c.fla 

Dans ce document, nous observons que l'interieur du MovieClip bouton1_mc affiche deja 
les objets zoneOut_mc et menuBouton1_mc, des la premiere image (voir Figure 13.10). 



Figure 13.10 

Scenario a l'inte- 
rieur du bou- 
ton 1. 
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D' autre part, aucune action specifique, en dehors des stops, n'apparait non plus a 
l'image 24. Toutes les actions sont centralisees a l'image 1 du scenario de la scene princi- 
pale. 

Dans le code de la scene principale, nous pouvons lire ceci : 

// initialisation 

var boutonActif :String; 

// actions 

//over 

menujnc . addE vent List ener(MouseE vent .M0USE_0VER, over) ; 
function over (evt :MouseEvent) { 
if (evt. target. currentFrame==1 ) { 
evt .target . gotoAndPlay ( "_over" ) ; 

} 

} 

//down 

menujnc . addE vent List ener ( MouseEvent . M0USE_D0WN , down ) ; 
function down (evt :MouseEvent) { 
boutonActif =evt . target . name; 

// 

if (evt .target . name=="bouton1_mc" ) { 
trace( "action 1 " ) ; 

} 

if (evt .target . name=="bouton2_mc" ) { 
trace( "action 2" ) ; 

} 

if (evt .target . name=="bouton3_mc" ) { 
trace( "action 3" ) ; 

} 

} 

//out 

menujnc . addEvent List ener (MouseEvent .MOUSE jOUT, out ) ; 
function out (evt :MouseEvent) { 

if (evt .target . name ! = "bouton1 jnc" ) { 
if (evt. target. currentFrame==24) { 
evt .target . gotoAndPlay ( "_out " ) ; 

} 
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} 

} 

// liens 1, 2 et 3, dans bouton 1 

menujnc . bouton 1_mc . menuBouton1_mc . addE vent List ener(MouseEvent .CLICK, act ions- 

MenuBoutonl ) ; 
function actionsMenuBoutonl (evt :MouseEvent) { 
if (evt .target . name=="lien1 jnc" ) { 
trace( "action 1 du menu bouton 1"); 

} 

if (evt .target . name=="lien2_mc" ) { 
trace( "action 2 du menu bouton 1"); 

} 

if (evt .target . name=="lien3_mc" ) { 
trace( "action 3 du menu bouton 1"); 

} 

} 

menujnc . bouton 1_mc . menuBouton1_mc . visible=f alse ; 
// sortie bouton 1 

menujnc . boutonljnc . zoneOutjnc . addEventListener (MouseEvent . MOUSEjDUT, sortirBoutonl ) ; 
function sortirBoutonl (evt :MouseEvent) { 
menujnc. boutonljnc. play () ; 

} 

menujnc . boutonljnc . zoneOutjnc . visible=f alse ; 

// gestion de l'affichage des liens dans le bouton 1 
addEventListener (Event . ENTER J^RAME, af f icherLiens) ; 
function aff icherLiens (evt: Event) { 

if (menujnc . boutonljnc . currentFrame==24) { 

menujnc . boutonljnc . menuBoutonl jnc . visible=true ; 
menujnc . boutonljnc . zoneOutjnc . visible=true; 
} else { 

menujnc . boutonljnc . menuBoutonl jnc . visible=f alse ; 
menujnc . boutonljnc . zoneOutjnc . visible=f alse ; 

} 

} 

Dans ce document, nous avons deplace les actions de 1' image 24, du symbole MovieClip 
boutonljnc, a l'interieur de la fenetre actions de la scene principale. Ann que ces actions 
s'executent correctement, nous avons place les objets cibles sur la premiere image du scena- 
rio bouton 1 . Ainsi, ils peuvent etre identifies par la tete de lecture, au moment oil les actions 
de la scene principale sont interpreters. Mais, pour que ces objets n'apparaissent pas au 
demarrage, nous avons ajoute des controles de visibilite, en fonction de l'image active de ce 
scenario. 

Le meme document, nomme "chl3_systemesNavigation_2d.fla", decline avec des instructions 
switch, est egalement disponible dans les fichiers des exemples du livre. 
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A retenir 

■ Des liens peuvent etre places localement dans un objet deja interactif. Pour cela, ils doivent etre pla- 
ces au premier plan et leurs actions doivent etre situees localement au niveau du lien. 

■ Une approche alternative existe. II est possible de placer les actions sur la scene principale, mais 
avec des conditions qui neutralisent d'abord I'affichage de I'objet par defaut. 

Console de navigation en miniature 

Si vous utilisez la fenetre de navigation de Photoshop ou d' Illustrator, vous etes surement 
familier avec la navigation dans une fenetre reduite. Une fenetre de navigation reduite 
reprend, en miniature, un apercu de l'ensemble de la scene et permet a l'utilisateur de s'y 
mouvoir en Y deplacant un simple rectangle. Ce rectangle materialise la zone visible a 
l'ecran. 

Dans cette section, nous allons voir comment mettre en place ce dispositif de navigation. 
Nous utilisons pour cela une carte du monde, agrandie a l'echelle de 200 % par rapport a sa 
taille initiale. Cette carte deborde done largement de la zone visible par l'utilisateur. C'est 
en deplacant le rectangle rouge de la fenetre de navigation, que Ton fera bouger le contenu, 
pour acceder aux informations que celui-ci propose (voir Figure 13.1 1). 



Figure 13.1 1 

Apercu du 
document publie. 




Exemples > chl 3_systemesNavigation_3.fla 

Dans le document "chl3_systemesNavigation_3.fla", sur la scene principale (voir 
Figure 13.12), au-dessus du caique fond_mc, nous visualisons le caique contenujnc 
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masque par un rectangle de dimensions equivalentes a celles de la scene, moins la barre 
d' informations. 



Figure 13.12 

Fenetre de 
scenario de la 
scene principale. 
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A l'interieur du caique nav_mc, figurent plusieurs symboles, dont le rectangle rouge que 
nous utilisons comme outil de deplacement et qui porte le nom d' occurrence f enetre_mc 
(voir Figure 13.13). En dessous, une copie de l'occurrence contenujnc est affichee en pro- 
portions reduites, elle illustre 1' ensemble du contenu disponible a la navigation, et situe la 
position courante du rectangle par rapport au contenu affiche dans cette zone. En arriere 
plan de ces caiques, le symbole f ondNavCentre_mc represente la zone limite de deplace- 
ment dont nous reprenons les coordonnees dans le code. L'objet f ondNavLarge_mc et le 
caique contour servent uniquement la decoration. 



Figure 13.13 

Fenetre de 
scenario du 
symbole nav_mc. 
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Dans la fenetre Actions de la scene principale, nous pouvons lire le code suivant : 

// initialisation 

var origineX : Number=nav_mc . f ondNavCent re_mc . x ; 
var origineY: Number=nav_mc .f ondNavCent re_mc .y ; 
var largeurRect :Number=(nav_mc .f ondNavCent re_mc .width) - 

(nav_mc.fenetre_mc. width) ; 
var hauteurRect :Number=(nav_mc.f ondNavCent re_mc. height) - 

(nav_mc.fenetre_mc. height) ; 
var zoneDeplacement : Rectangle=new Rectangle(origineX, origineY, largeurRect, 
>• hauteurRect) ; 
// 

var echelleMouvement : Number=( contenujnc .width/nav_mc .f ondNavCent re_mc .width) ; 

// actions 

// deplacement du rectangle 

nav_mc .tenet re_mc . addE vent List ener (MouseEvent . M0USE_D0WN ,deplacerRect angle) ; 
function deplacerRectangle (evt :MouseEvent) { 

addEventListener(Event . ENTER_FRAME, deplacerContenu) ; 

nav_mc . f enetrejnc . startDrag (false, zoneDeplacement ) ; 

} 

addEventListener(MouseEvent .M0USE_UP, relacherRectangle) ; 
function relacherRectangle (evt :MouseEvent) { 
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removeE vent List ener( Event . ENTER_FRAME, deplacerContenu) ; 
stopDrag( ) ; 

} 

// deplacement du contenu 

function deplacerContenu (evt:Event) { 

contenu_mc . x=nav_mc . tenet re_mc . x*-echelleMouvement ; 

contenujnc . y=nav_mc . tenet re_mc . y*-echelleMouvement ; 

} 

Le programme se deroule en trois etapes. Nous definissons d'abord la zone de deplacement. 
Nous activons ensuite le mouvement. Puis nous lions le contenu de la scene a l'outil 
deploye et mobile. 

Tout d'abord, dans la partie initialisation, nous specifions, au travers des quatre premieres 
variables, les limites de la zone de deplacement : 

var origineX: Number=nav_mc . f ondNavCentre_mc . x ; 
var origineY : Number=nav_mc . f ondNavCent re_mc . y ; 
var largeurRect : Number= ( nav_mc . f ondNavCent re_mc . width ) - 

(nav_mc.fenetre_mc. width) ; 
var hauteurRect : Number= ( nav_mc . f ondNavCent re_mc . height ) - 

(nav_mc.fenetre_mc. height) ; 
var zoneDeplacement : Rectangle=new Rectangle(origineX, origineY, largeurRect, 
»» hauteurRect) ; 

Nous reprenons la position courante et les dimensions de la zone de deplacement contenue 
dans le symbole nav_mc, qui porte le nom d'occurrence f ondNavCent re_mc. Mais pour 
definir la largeur utile de ce deplacement, nous devons egalement soustraire la largeur et la 
hauteur du rectangle mobile, comme nous l'avions fait pour l'ascenseur au Chapitre 2, avec 
les interpolations TweenMax. 

Plus bas, nous definissons une variable pour determiner le coefficient de vitesse du mouve- 
ment. II s'agit du rapport d'echelle entre la faille du contenu de la scene principale et les 
dimensions de la zone de deplacement : 

var echelleMouvement : Number=( contenujnc .width/nav_mc .f ondNavCent re_mc .width) ; 

Dans la deuxieme partie, nous activons en premier la fonction qui recalcule la position des 
objets (deplacerContenu). Puis, a la ligne, nous activons le controle du mouvement de la 
forme rectangulaire rouge et introduisons, en parametre de la methode startDrag, la refe- 
rence au rectangle prealablement designe : 

// actions 

// deplacement du rectangle 

nav_mc .tenet re_mc . addE vent List ener(MouseEvent .M0USE_D0WN,deplacerRect angle) ; 
function deplacerRectangle (evt :MouseEvent) { 

addEventListener(Event . ENTER_FRAME, deplacerContenu) ; 

nav_mc . f enet re_mc . startDrag (false , zoneDeplacement ) ; 

} 

addEventListener(MouseEvent .M0USE_UP, relacherRectangle) ; 
function relacherRectangle (evt :MouseEvent) { 

removeE vent List ener( Event . ENTER_FRAME, deplacerContenu) ; 

stopDrag( ) ; 

} 
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Cette forme est entierement cliquable car nous y avons introduit un symbole qui couvre 
toute la surface mais avec un alpha a 0 %. Le parametre false indique que l'objet ne se 
repositionne pas en fonction du clic souris, a l'inverse, l'usage de true aurait centre le 
rectangle en fonction de ce clic. 

La fonction relacherRectangle interrompt le deplacement du symbole et la fonction 
deplacerContenu, geree par un ENTER_FRAME. 

Enfin, nous ajoutons un ecouteur qui execute le repositionnement en reprenant le coefficient 
calcule en amont, et repositionne le symbole contenu_mc, en X et en Y, en fonction de la 
position du rectangle rouge : 

// deplacement du contenu 

addEventListener(Event .ENTER_FRAME, deplacerContenu) ; 
function deplacerContenu (evt:Event) { 

contenujnc . x=nav_mc . tenet re_mc . x*-echelleMouvement ; 

contenujnc . y=nav_mc . tenet re_mc . y*-echelleMouvement ; 

} 

A retenir 

■ La partie active d'un bouton ou de tout type de symbole doit toujours etre materialisee. Pour depla- 
cer une forme qui n'affiche pas de fond, nous placons, a I'interieur du symbole utilise pour le depla- 
cement, une forme pleine mais transparente. 

■ Pour determiner le rapport d'echelle des dimensions entre un contenu et la scene courante, il suffit 
de diviser les dimensions de la premiere par la seconde. 



Menu deroulant a repositionnement automatique 

La creation d'un menu deroulant ne pose pas de difficulte particuliere des lors que Ton 
sait utiliser les masques, le scenario, quelques transitions animees et les conditions en 
ActionScript. Mais, si nous voulons que les menus s'affichent en colonne, par exemple, 
les uns au-dessus des autres, le mecanisme peut se compliquer. En effet, pour ouvrir un 
menu et afficher ses sous-entrees, nous devons alors chasser les menus du dessous, encore 
refermes, a mesure que les sous-entrees du menu precedent descendent. Et inversement a 
la fermeture. 

Pour realiser ce dispositif, nous creons des sous-menus directement a I'interieur des Movie- 
Clip boutons qui representent les entrees principales de chaque menu. Puis, nous utilisons 
des transitions de type TweenMax pour activer le defilement des sous-menus, sur clic de 
l'utilisateur. 

Nous gerons aussi le repositionnement des entrees principales de menu, avec un gestion- 
naire de type ENTER_FRAME. C'est dans ce gestionnaire que nous indiquons, a chaque entree 
principale, de se positionner en fonction de la position Y du dernier element du menu prece- 
dent. Ainsi, quelle que soit la position des sous-entrees de chaque menu, les entrees princi- 
pales et leurs sous-menus respectifs, enfants, suivent les mouvements de chaque sous-menu. 
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Dans cette section, nous utilisons un menu a trois entrees, qui affichent, chacune, cinq sous- 
entrees. Les symboles utilises sont tous differents. Vous pouvez done rapidement personna- 
liser le fichier pour vous l'approprier et y placer de vraies fonctionnalites (voir 
Figure 13.14). 



Figure 13.14 

Apercu du 
document publie. 
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Dans la scene principale du document "chl3_systemesNavigation_4.fla", nous pouvons 
voir un symbole menu_mc qui contient trois entrees principales de menu, respectivement 
nominees entree1_mc, entree2_mc et entree3_mc. 

Dans le scenario de chaque bouton MovieClip d'entree, nous remarquons la presence d'un 
masque qui rend invisibles les sous-entrees appelees par les scripts. Si nous deverrouillons 
les caiques, nous constatons que ces sous-entrees sont positionnees, au pixel pres, au-dessus 
de la zone d'affichage, materialisee par le masque (voir Figures 13.15 et 13.16). Dans les 
scripts, nous determinerons le positionnement des elements en fonction de leur position 
courante. II est done important que les elements ne soient pas places n'importe ou. 



Figure 13.15 

Apercu du 
scenario de la 
scene d'un sous- 
menu 
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Figure 13.16 

Apercu du sous- 
menu et de son 
masque. 




Figure 13.17 

Apercu du 
scenario de la 
scene principale. 
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Dans le scenario de la scene principale (voir Figure 13.17), au-dessus des caiques de deco- 
ration et du menu, nous accedons aux actions qui affichent le code suivant : 



// 

import gs.*; 
import gs. easing.' 
import gs. events.' 



initialisation 



var initEntreel Y: Number=menu_mc . entree1_mc .y ; 
var initEntree2Y : Number=menu_mc . entree2_mc . y ; 
var initEntree3Y : Number=menu_mc . entree3_mc . y ; 

var initSousMenul Y : Number=menu_mc . entree 1_mc . sousMenu_mc . y ; 
var initSousMenu2Y : Number=menu_mc . entree2_mc . sousMenu_mc . y ; 
var initSousMenu3Y : Number=menu_mc . entree3_mc . sousMenu_mc . y ; 

// actions 

// activation des sous-menus 

menujnc . addEvent List ener(MouseE vent .M0USE_D0WN, ouvrirMenu) ; 
function ouvrirMenu(evt:MouseEvent) { 
if (evt .target . name=="entree1_mc" ) { 

if (menu_mc.entree1_mc.sousMenu_mc.y<=initSousMenu1Y) { 

TweenMax.to(menu_mc.entree1_mc.sousMenu_mc, 0.5, { 

y:initSousMenu1Y + menu_mc.entree1_mc.sousMenu_mc. height, 

ease : Strong . easel nOut , 

onStartListener : placeEcouteur, 

onCompleteListener : retireEcouteur, 

overwrites 

}); 

} else { 
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TweenMax.to(menu_mc.entree1_mc.sousMenu_mc, 0.5, { 

y:initSousMenu1Y, 

ease : Strong . easelnOut , 

onStartListener : placeEcouteur, 

onCompleteListener : retireEcouteur, 

overwrite:3 

}); 

} 

} 

if (evt .target . name=="entree2_mc" ) { 

if (menu_mc.entree2_mc.sousMenu_mc.y<=initSousMenu2Y) { 
TweenMax.to(menu_mc.entree2_mc.sousMenu_mc, 0.5, { 
y:initSousMenu1Y + menu_mc . entree2_mc . sousMenu_mc . height, 
ease : Strong . easel nOut , 
onStartListener : placeEcouteur, 
onCompleteListener : retireEcouteur, 
overwrite:3 

}); 

} else { 

TweenMax.to(menu_mc.entree2_mc.sousMenu_mc, 0.5, { 

y:initSousMenu1Y, 

ease : Strong . easelnOut , 

onStartListener : placeEcouteur, 

onCompleteListener : retireEcouteur, 

overwrite:3 

}); 

} 

} 

if (evt .target . name=="entree3_mc" ) { 

if (menu_mc.entree3_mc.sousMenu_mc.y<=initSousMenu3Y) { 
TweenMax.to(menu_mc.entree3_mc.sousMenu_mc, 0.5, { 
y:initSousMenu1Y + menu_mc . entree3_mc . sousMenu_mc . height, 
ease : Strong . easelnOut , 
onStartListener : placeEcouteur, 
onCompleteListener : retireEcouteur, 
overwrite:3 

}); 

} else { 

TweenMax.to(menu_mc.entree3_mc.sousMenu_mc, 0.5, { 

y:initSousMenu1Y, 

ease : Strong . easelnOut , 

onStartListener : placeEcouteur, 

onCompleteListener : retireEcouteur, 

overwrite:3 

}); 

} 

} 

trace (evt. target. name) ; 
} 

// suivi des entrees 

function placeEcouteur ( Evt :TweenEvent) { 

addE vent List ener( Event . ENTER_FRAME , replacerEntreesMenu) ; 

} 

function retireEcouteur(Evt :TweenEvent) { 

removeEventListener( Event . ENTER_FRAME, replacerEntreesMenu) ; 

} 



Les systemes de navigation avances 



411 




function replacerEntreesMenu(evt:Event) { 
trace( "fonction active") 

menu_mc . entree2_mc . y=initEnt ree2Y+ (menu_mc . entree1_mc . sousMenu_mc . 

y-initSousMenu1 Y) ; 
menu_mc . entree3_mc . y=initEnt ree3Y+ (menu_mc . entree1_mc . sousMenujnc . 
»» y-initSousMenu1 Y) + (menu_mc . entree2_mc . sousMenu_mc.y-initSousMenu2Y) ; 

} 

Notre code se definit en trois parties. La premiere importe les classes et enregistre la posi- 
tion courante des elements. La deuxieme active le deroulement des sous-menus. La troi- 
sieme et derniere partie repositionne les entrees en fonction de la position courante des 
sous-menus. 

Dans la premiere partie, 1' initialisation, apres l'importation des classes, nous stockons les 
valeurs de position en Y, de chaque sous-menu et de chaque entree de menu : 

var initEntreelY: Number=menu_mc . entree 1_mc . y ; 
var initEntree2Y: Number=menu_mc . entree2_mc . y ; 
var initEntree3Y: Number=menu_mc . entree3_mc . y ; 

var initSousMenulY: Number=menu_mc . entree1_mc . sousMenu_mc .y ; 
var initSousMenu2Y: Number=menu_mc . entree2_mc . sousMenu_mc .y ; 
var initSousMenu3Y: Number=menu_mc . entree3_mc . sousMenu_mc . y ; 

Dans les actions, lorsque l'utilisateur active une des entrees du menu (evt .target), nous 
ajoutons des actions selon le nom de 1' entree activee : 

// actions 

// activation des sous-menus 

menujnc . addEvent List ener(MouseE vent .MOUSE_DOWN,ouvrirMenu) ; 
function ouvrirMenu(evt:MouseEvent) { 
if (evt .target . name=="entree1_mc" ) { 

if (menujnc. entree1_mc. sousMenujnc. y<=initSousMenu1Y) { 



TweenMax.to(menujnc. entreeljnc. sousMenujnc, 0.5, { 

y:initSousMenu1Y + menujnc . entreeljnc . sousMenujnc . height , 

ease : Strong . easel nOut , 

onStartListener : placeEcouteur, 

onCompleteListener : retireEcouteur, 

overwrite:3 



TweenMax.to(menujnc. entreeljnc. sousMenujnc, 0.5, { 
y:initSousMenu1Y, 
ease : Strong . easel nOut , 
onStartListener : placeEcouteur, 

onCompleteListener : retireEcouteur, 
overwrite:3 



} 



}); 

else { 



}); 



} 



} 

// declinaison des instructions pour les entrees de menu 2 et 3 

trace (evt .target . name) ; 

} 
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A l'interieur de chaque condition, une autre condition verifie si la position courante du 
sous-menu concerne est en position affichee ou repliee. La position repliee est definie en 
reprenant une des valeurs enregistrees en amont. Si la valeur enregistree est identique a la 
position actuelle, alors, le sous-menu n'a pas bouge. II est done ramasse. Ceci s'inverse des 
que le sous-menu est active, celui-ci est deplace et sa position ne repond plus a la condition 
qui alors execute une autre instruction. 

La position des sous-menus, lorsqu'ils sont affiches, augmente de l'equivalent de leur hau- 
teur respective (d'ou la necessite de les placer precisement a la limite de la zone d'affichage, 
dans chaque entree de menu) : 

TweenMax.to(menu_mc.entree1_mc.sousMenu_mc, 0.5, { 

y : initSousMenulY + menu_mc.entree1_mc.sousMenu_mc. height, 

ease : Strong . easelnOut , 
onStartListener : placeEcouteur, 
onCompleteListener : retireEcouteur, 
overwrite:3 

}); 

Si la condition est verifiee, si le menu est ferme done, une transition de type TweenMax le 
deplace de l'equivalent de sa hauteur a laquelle nous ajoutons (par securite), sa position 
enregistree. Sinon, il le ramene uniquement a sa position prealablement enregistree 
(initSousMenul Y), done, en position replie (voir Figure 13.18). 



Figure 13.18 

Mecanisme de 
repositionne- 
ment des entrees 
principales du 
menu. 




Au sein des interpolations, d'autres proprietes sont utilisees. Chacune se termine en invo- 
quant directement, grace aux proprietes d'ecouteur onStartListener et onComplete- 
Listener, abordees au Chapitre 2, deux autres fonctions. La premiere (placeEcouteur) 
active le repositionnement continu des objets au demarrage de 1' interpolation. La seconde 
(retire-Ecouteur) interrompt cette fonction une fois 1' interpolation achevee : 



Les systemes de navigation avances 




// suivi des entrees 

function placeEcouteur(Evt :TweenEvent) { 

addE vent Listener ( Event . ENTER_FRAME, replacerEntreesMenu) ; 

} 

function retireEcouteur (Evt :TweenEvent ) { 

removeE vent Listener ( Event . ENTER_FRAME, replacerEntreesMenu) ; 

} 

II serait dommage en effet de conserver active la fonction replacerEntreeMenu et de 
continuer de calculer le repositionnement meme lorsqu'aucune entree du menu n'est cliquee. 
Cette fonction qui est associee a l'evenement ENTER_FRAME sollicite d'importantes ressour- 
ces. En desactivant cette fonction lorsqu'elle n'est plus usitee, nous optimisons celles de 
l'utilisateur. 

Un dernier parametre (overwrite) permet a chaque interpolation de reprendre la main si 
l'utilisateur activait une entree du menu alors qu'une autre interpolation est deja en cours 
d'execution. L' interpolation en cours est dans ce cas interrompue et permet a la nouvelle de 
demarrer. Cette propriete est utilisee pour eviter les conflits lorsque plusieurs interpolations 
ciblent les memes objets, ce qui est notre cas dans ce dispositif de navigation. 



■ 
■ 



Propriete overwrite pour TweenMax 

La propriete overwrite controle le comportement des autres interpolations si elles interviennent sur 
le meme objet. La valeur attendue est un chiffre entier compris entre 0 et 3 : 

■ 0 (NONE). Aucune interpolation n'est neutralisee. Cette option risque de creer des conflits si 
d'autres interpolations affectent simultanement le meme objet avec les memes proprietes. 

■ 1 (ALL). Cette valeur est celle activee par defaut sauf si la methode OverwriteMana- 
ger.init() est invoquee. Toutes les interpolations qui affectent le meme objet sont neutrali- 
ses, qu'elles soient actives ou non. Par exemple : 



TweenMax. to (mc, 1, {x:100, y:200}); 
TweenMax. to (mc, 1, {x:300, delay:2, overwrite : 1 }) ; 
// cette interpolation ecrase la precedente. 

2 (AUTO). Cette valeur est celle activee par defaut lorsque la methode Overwrite- 
Manager . init ( ) est invoquee. La valeur 2 ecrase uniquement les proprietes communes avec les 
interpolations en cours sur les memes objets. Par exemple : 

TweenMax. to (mc, 1, {x:100, y:200}); 
TweenMax. to (mc, 1, {x:300, overwrite^}); 

// seule la propriete x de 1 ' interpolation precedente est ecrasee. 

3 (CONCURRENT). Interrompt toutes les interpolations, uniquement ayant cours, et qui affec- 
tent les memes objets. Par exemple : 

TweenMax. to(mc, 1, {x:100, y:200}); 
TweenMax. to(mc, 1, {x:300, delay:2, overwrite:3}) ; 

// cette interpolation n'ecrase pas la precedente, car elle intervient 
// avec un delai de 2 secondes apres l'autre, 
// bien qu'elles affectent le meme objet mc. 
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Les conditions sont declinees pour chaque entree. Une action trace permet egalement de 
visualiser que le ciblage des elements fonctionne bien. Cette action vous permet aussi de 
personnaliser facilement ce developpement en Y ajoutant vos propres actions, en rapport 
avec chaque lien. II suffit alors de reprendre simplement son nom pour un ciblage dynamique, 
comme vu precedemment. 

Dans la troisieme partie, un gestionnaire ENTER_FRAME recalcule en la position de chaque 
entree de menu : 

addEventListener(Event .ENTER_FRAME, replacerEntreesMenu ) ; 
function replacerEntreesMenu(evt:Event) { 

menu_mc . entree2_mc . y=initEntree2Y+ (menu_mc . ent ree1_mc . sousMenujnc . 

y-initSousMenu1 Y) ; 
menu_mc . entree3_mc . y=initEnt ree3Y+ (menu_mc . ent reel _mc . sousMenu_mc . 
y-initSousMenu1 Y) + (menu_mc . entree2_mc . sousMenu_mc . y-initSousMenu2Y) ; 

} 

La premiere instruction determine la position Y de la deuxieme entree. La premiere, demeurant 
immobile, il n'est done pas utile de la calculer. 

Dans cette premiere equation, nous specifions que la position en Y de l'entree 2 doit depen- 
dre de la position en Y du bas du sous-menu de l'entree 1. Le bas du sous-menu est calcule 
en additionnant sa hauteur a sa position courante en Y (voir Figure 13.18). 

Le principe est le meme pour l'entree 3, a la difference que nous decalons le calcul d'une 
ligne, en ajoutant la position courante en Y du deuxieme sous-menu. 

A retenir 

■ Pour realiser des menus qui se repositionnent les uns par rapport aux autres, dynamiquement, nous 
devons utiliser un gestionnaire ENTER_FRAME qui definit la position de chaque entree de menu par 
rapport a la position courante du sous-menu qui la precede. 

■ Le positionnement des sous-entrees de menu est important, dans la construction du document, car 
cela determine leur visibility lorsqu'elles sont deployees. 



Activer et desactiver les boutons et les MovieClip 

Dans bien des cas, il est necessaire de desactiver des liens et des MovieClip initialement 
associes a un ecouteur d'evenement. Lorsque vous chargez une rubrique par-dessus une 
interface deja riche en fonctionnalites, par exemple, il peut etre conflictuel de garder actifs 
certains elements laisses en arriere-plan. 

Dans cette section, nous presentons les differentes methodes employees pour neutraliser un 
bouton ou un MovieClip. Mais aussi pour materialiser le pointeur en forme de main sur les 
MovieClip et ainsi ameliorer l'ergonomie de certaines mises en scene. 

• Pour desactiver uniquement les etats des boutons (haut, dessus et abaisse), utilisez 1' ins- 
truction : nomDuBouton.enabled=false; 

• Pour desactiver l'interactivite d'un bouton ou d'un MovieClip, utilisez : nomDuBouton- 
OuClip . mouseEnabled=f alse ; 
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• Pour desactiver l'interactivite d'un bouton ou d'un MovieClip ainsi que tout element 
enfant de chaque objet gere avec evt. target (precision valable pour les clips ou les Sprites) : 
nomDuBoutonOuClip . mouseChildren=f alse ; 

• Pour activer uniquement l'affichage de la main, au survol du pointeur, sur un Movie - 
Clip, choisissez l'instruction : nomDuClip. buttonMode = true; 

• Pour desactiver l'affichage de la main sur un symbole bouton, prenez V instruction suivante : 
nomDuBouton . useHandCursor=f alse ; 

Vous pouvez aussi neutraliser les interactions avec l'une de ces methodes : 

• Masquer un bouton ou un MovieClip a l'aide de la propriete visible, passee sur 
false. 

• Supprimer l'objet de la liste d'affichage avec la methode removeChild ( ) . 

• Supprimer l'ecouteur associe a l'objet bouton ou MovieClip avec la methode remove- 
EventListener. 

Attention, ces techniques ne suppriment pas les actions eventuellement en cours d' execution, 
elles rendent seulement les objets interactifs indisponibles pour le lancement de nouvelles 
actions. 

Ciblage des boutons entre SWF imbriques. II est souvent utile de pouvoir neutraliser une action 
ou reagir en fonction d'une action lancee dans un document SWF importe. Reportez-vous au Chapi- 
tre 8 pour en savoir plus sur les techniques de ciblage d'objets dans des contenus imbriques. 

Target et currentTarget. La definition des actions sur les symboles boutons et MovieClip se deter- 
mine aussi dans le cadre d'elements contenus a I'interieur d'un objet parent et cibles avec les proprie- 
tes target et currentTarget. Reportez-vous egalement au Chapitre 5 pour en savoir plus a ce 
sujet. 

Synthese 

Dans ce chapitre, vous avez appris a developper des systemes de navigation sophistiques en 
y integrant des boutons avec des etats visites ou actives. Vous avez appris a transformer de 
simples liens en zone interfacable et interactive sans conflit avec l'environnement initial. 
Vous avez egalement vu comment gerer la superposition dynamique de menus deroulants. 
Vous avez enfin appris a realiser un dispositif de navigation global concentre dans une fenetre 
reduite. Vous etes en mesure de realiser des interfaces souples et ergonomiques. 
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Introduction 

Interprets la plupart du temps depuis une fenetre de navigateur, Flash offre de nombreu- 
ses fonctionnalites qui favorisent l'echange entre des contenus HTML et Flash. Vous pou- 
vez gerer l'historique de navigation de Flash depuis le navigateur. Vous pouvez aussi 
appeler une configuration particuliere d'un document Flash, en fonction de la page 
HTML qui y fait reference, en invoquant par exemple directement une image-cle du sce- 
nario. Naturellement, vous pouvez egalement lancer des pages HTML a partir de Flash. 
Enfin, pour offrir encore plus de fonctionnalites dans 1' interface de Flash, et rappeler cer- 
taines options de la fenetre de navigateur, le menu contextuel de Flash est personnalisable 
et vous pouvez y attacher les instructions de votre choix. Enfin, vous pouvez, en ajoutant 
un parametre dans la page HTML, configurer une animation Flash pour rendre la scene 
transparente. 

Dans ce chapitre, nous allons aborder l'ensemble de ces mecanismes pour vous permettre 
d'integrer efficacement vos realisations au sein d'un environnement web HTML. A Tissue 
de ce chapitre, vous serez capable d'elaborer facilement des liaisons entre differents types 
de contenus, realises en HTML et en Flash. 

Menu contextuel du lecteur Flash 

Un menu contextuel est accessible par le clic-droit de la souris sur la fenetre de 1' anima- 
tion. Si votre souris ne dispose pas du clic-droit, le menu contextuel peut apparaitre en 
effectuant simultanement un clic de souris et en appuyant sur la touche Controle du 
clavier. 

La classe contextMenu de Flash permet de personnaliser une partie du menu contextuel. 
Loption d'affichage de la version du lecteur reste cependant affichee. Vous pouvez aussi 
choisir de conserver certaines des options disponibles par defaut, comme l'option Imprimer, 
par exemple. 

Dans cette section, nous allons voir comment personnaliser un menu contextuel sur un sym- 
bole de type MovieClip. Nous allons permettre a l'utilisateur d'afficher une nouvelle 
image, en selectionnant une option du menu contextuel a l'emplacement d'une photo, pour 
ce faire (voir Figure 14.1). 




Exemples > chl4_communicationFlash(HTML_I.fla 

Dans le document "chl4_communicationFlashHTML_l.fla", dans la scene principale, un 
symbole vegetal_mc decore la scene. Au-dessus, un MovieClip nomme galerie_mc affi- 
che une suite d'images. 

Dans le document SWF si l'utilisateur effectue un clic-droit sur l'image affichee, une 
option propose de voir une autre image. Si 1' option est activee, une nouvelle image apparait 
aussitot. 

Dans la fenetre de scenario de la scene principale, le caique Actions affiche le code 
suivant : 

// actions 

galerie_mc . stop( ) ; 

// Personnalisation du menu contextuel 

// attacher le menu a un objet 

var menuContextuel:ContextMenu= new ContextMenu( ) ; 
galerie_mc . contextMenu=menuContextuel ; 

// purger le contenu par defaut 
menuContextuel. hideBuiltInItems( ) ; 

var entreesParDef aut : ContextMenuBuiltInItems=menuContextuel . built I nit ems; 
entreesParDef aut . print=true; 

// ajouter les entrees du menu 

var entreel :ContextMenuItem=new ContextMenuItem( "Voir une autre image"); 
menuContextuel. customItems.push(entree1 ) ; 

entreel .addEventListener(ContextMenuEvent.MENU_ITEM_SELECT, f onctionEntreel ) ; 



// attacher les fonctions aux entrees 
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function f onctionEntreel (evt:ContextMenuEvent) { 

if (galerie_mc.currentFrame==galerie_mc.totalFrames) { 

galerie_mc.gotoAndStop(1 ) ; 
} else { 

galeriejnc . nextFrame ( ) ; 

} 

} 

Pour creer un menu contextuel, nous devons d'abord purger les entrees existantes. C'est 
alors que nous ajoutons de nouveaux elements auxquels nous associerons des fonctions. 

Dans notre exemple, la premiere instruction interrompt la tete de lecture sur la premiere 
image du symbole galeriejnc : 

// actions 

galeriejnc . stop( ) ; 

Nous attachons ensuite un nouvel objet menuContextuel a notre galerie. Nous pouvons, 
ainsi, specifier un menu different pour chaque conteneur, si nous le souhaitons : 

// attacher le menu a un objet 

var menuContextuel:ContextMenu= new ContextMenuQ ; 

galeriejnc . contextMenu=menuContextuel ; 

Puis, nous purgeons le menu actuel de ses entrees affichees par defaut. 

// purger le contenu par defaut 
menuContextuel . hideBuiltlnl terns ( ) ; 

Nous utilisons ici plusieurs methodes. La premiere, hideBuiltInItem( ) supprime tous les 
elements sauf les parametres du lecteur Flash. II est possible de conserver neanmoins certai- 
nes options. Pour cela, il suffit de les ajouter a la liste videe. Pour ajouter une option par 
defaut, nous typons un nouvel objet ContextMenuBuiltlnltem auquel nous specifions 
F option a integrer : 

var entreesParDef aut :ContextMenuBuiltInItems=menuContextuel. built Inltems; 
entreesParDef aut .print=true; 

Les options disponibles par defaut sont : f orwardAndBack (affiche une image en arriere ou 
en avant), loop (boucle), play (lire), print (imprimer), quality (qualite), rewind (rembo- 
biner), save (enregistrer) et zoom (zoom). Pour les activer, il suffit de les attacher au menu 
designe et de les passer en true, comme dans notre exemple avec l'option d'impression print. 

Une fois la structure de base definie, nous pouvons personnaliser le menu en y integrant nos 
propres entrees : 

// ajouter les entrees du menu 

var entreel :ContextMenuItem=new ContextMenuItem( "Voir une autre image"); 

menuContextuel. customItems.push(entree1 ) ; 

Pour ajouter une entree, nous creons un nouvel objet ContextMenuItem( ) et renseignons, 
en parametre, une chaine de caracteres qui correspond au texte a afficher dans le menu. 

Pour ajouter cet objet au menu, nous l'implementons comme pour l'ajouter a un tableau, a 
l'aide de la methode push ( ) . Attention, l'objet doit etre implements en tant qu'entree - ele- 
ment d'une liste. Nous devons pour cela preciser la propriete customltems, juste avant 
d'appliquer la methode push ( ) . 
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Vous pouvez ajouter autant d'entrees que voulu. Creez alors autant de nouveaux objets 
ContenuMenuItem. 

Lorsque les entrees ont ete ajoutees, il ne reste plus qu'a leur affecter une action. Nous uti- 
lisons, pour etablir cette relation, un ecouteur avec l'evenement MENU_ITEM_SELECT qui 
designe le moment oil l'utilisateur selectionne l'entree du menu : 

entreel . addEventListener(ContextMenuEvent .MENU_ITEM_SELECT, f onctionEntreel ) ; 

Puis, nous developpons les actions appelees. Dans notre exemple, la fonction affiche 
une nouvelle image de la galerie, avec la methode nextFrame( ). Si cette image est la 
derniere de la sequence animee, alors, la tete de lecture revient a la premiere image. 
Elle boucle : 

// attacher les fonctions aux entrees 

function f onctionEntreel (evt:ContextMenuEvent) { 

if (galerie_mc.currentFrame==galerie_mc.totalFrames) { 

galerie_mc.gotoAndStop(1 ) ; 
} else { 

galerie_mc . nextFrame ( ) ; 

} 

} 

A retenir 

■ Pour creer un menu contextuel personnalise, nous utilisons la classe contextMenu. 

■ Les options du menu contextuel de Flash, affichees par defaut, peuvent etre supprimees ou partiel- 
lement conservees. Seule la version du lecteur ne peut etre supprimee du menu contextuel. 

Navigation Flash vers le HTML 

La base de la communication entre un contenu en Flash et une page HTML est la creation 
de liens. Ces liens appellent une page HTML, un site distant ou activent l'ouverture d'un 
logiciel de messagerie, par exemple. 

Dans cette section, nous presentons la syntaxe de creation de lien dans Flash pour appeler 
une page HTML et d'autres types de references hypertextes (sites, messagerie, PDF). 

Exemples > ch 1 4_communicationFlashHTML_2.fla 

Sur la scene principale du document "chl4_communicationFlashHTML_2.fla" figure un 
bouton affichant un texte simple : ">Retour a la page HTML" (voir Figure 14.3). 



Figure 14.3 

Apercu de la 
scene principale. 
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Dans le fichier SWF, en cliquant sur le bouton, une page HTML est bien appelee ; page dont 
nous detaillons d' ailleurs le contenu dans la section suivante. 

Dans la fenetre de scenario de la scene principale, sur le caique Actions, nous pouvons lire 
le code suivant : 

// lien HTML 

lienHTML_bt n.addE vent List ener(MouseE vent .CLICK, lienHTML) ; 
function lienHTML (evt :MouseEvent) { 

navigateToURL(new URLRequest ( "ch14_communicationFlashHTML_3b. html" ) ) ; 

} 

En ActionScript 3, pour appeler une page HTML, nous utilisons la methode navigate- 
ToURL et specifions, en parametre, un objet URLRequest qui fait reference a une adresse 
definie sous la forme d'une chaine de caracteres. 

L adresse utilisee peut appeler une page web locale, au sein du meme site que la page qui 
contient le document Flash. Les exemples suivants invoquent differents elements : 

• une page de contact au format PHP : 
navigateToURL(new URLRequest( "contact. php" ) ) ; 

• une adresse de site web distant : 

navigateToURL(new URLRequest ( "http: //www. pearson.fr/ " ) ) ; 

• l'ouverture d'une fenetre de messagerie : 

navigateToURL ( new URLRequest ( "mailto : contact@pearson . f r?sub j ect=demande de 
renseignement " ) ) ; 

• l'ouverture d'un PDF : 

navigateToURL (new URLRequest ( "nomDuDocument.pdf" ) ) ; 

• Pour appeler un site dans une nouvelle fenetre, nous ajoutons la cible : 
navigateToURL (new URLRequest( "http: //www. pearson.fr" , "_blank" ) ) ; 



Les cibles d'affichage. Pour chaque lien hypertexte cree, une cible permet de definir la maniere 
dont le navigateur affiche la page appelee. Lorsque les sites web usaient encore, dans le passe, de 
structures composees de jeux de cadres (framesets), nous pouvions utiliser les valeurs _self , 
_blank, _parent ou _top afin de determiner si la page appelee devait se substituer ou non aux jeux 
de cadres. Les liens demeurant desormais independants de ce type de structure, nous n'utilisons plus 
que_self ou_blank. 

■ _self : la cible _self equivaut a ne rien indiquer et signifie que la page appelee doit s'afficher 
dans le meme cadre que celui ou Ton a clique. 

■ _blank : la cible _blank appelle I'affichage dans une nouvelle fenetre de navigateur. Le terme 
anglais Blank designe un espace vierge, represente ici par l'ouverture d'une nouvelle fenetre. Ne 
confondez pas ce mecanisme avec le comportement JavaScript permettant d'enclencher 
l'ouverture d'une fenetre pop-up, que les usages ont egalement proscris. L'affichage d'une page 
avec _blank etablie en outre une rupture semantique avec la page initiale. Cette technique 
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d'affichage ne doit done pas etre abusee, surtout dans le contexte de creation de sites qui doivent 
repondre aux regies elementaires d'accessibilite (voir aussi les sections en fin d'ouvrage sur 
I'accessibilite). 

La plupart des contenus appeles s'affichent dans la meme fenetre que le document Flash, a 
la place du Flash lui-meme, a l'exception des scripts JavaScript ou PHP (ou autres) even- 
tuellement invoques. Les pages pour lesquelles une cible de type _blank est egalement 
associee s'affichent dans une nouvelle fenetre de navigateur et preservent 1'affichage de 
votre document dans la fenetre initiale. 

Attention, cette option n'est recommandee que pour les liens faisant appel a des elements 
situes a une autre URL, car elle entraine une rupture semantique du flux qui peut perturber 
certains utilisateurs. 

Lorsque vous designez une adresse d'un site ou d'une page distante, veillez a toujours 
commencer 1' adresse par http : / / . 

Si les liens crees appellent des instructions localisees dans la page HTML qui contient le 
Flash, ou lorsque des actions ne peuvent etre lancees que par un navigateur, pour tester 
le bon fonctionnement des liens hypertextes, il est recommande de projeter la page dans 
un navigateur et non de verifier les animations seulement depuis Flash en publiant le 
fichier SWF. Le lecteur Flash, active a la publication du document, n'est pas un naviga- 
teur. Ainsi, il ne peut executer tous les types de liens (notamment pour l'ouverture de la 
fenetre de messagerie ou lancer les scripts executes localement ou depuis un serveur dis- 
tant). 

Creer un lien HTML sans ActionScript dans Flash. Si vous cherchez a realiser un lien dans le 
flux d'un texte, sans style specifique, sans avoir a creer de symbole Bouton ou MovieClip et sans avoir 
a coder en ActionScript, vous pouvez utiliser les proprietes de texte. Selectionnez d'abord la portion 
de texte a rendre cliquable. Et depuis I'inspecteur de proprietes, dans le champ Lien (categorie 
Option), saisissez directement le lien ou le type de reference hypertexte a appeler. Puis, appuyez sur 
Entree pour confirmer la saisie. 

II est egalement possible de generer un lien HTML dynamiquement si le champ de texte dynami- 
que affiche un rendu HTML. En ActionScript, modifiez la valeur du champ de texte en specifiant, 
dans la chaine de caracteres du texte a afficher, la balise HTML qui permet de creer un lien. Le 
texte dynamique de nom d'occurrence monTexte_txt utilise, dans I'exemple suivant, cette 
propriete : 

monTexte_txt . htmlText = '<a href ="http: / /www. pearson .f r">Lien</a> ' 
A retenir 

■ Vous pouvez appeler tout type de contenu exterieur a Flash et I'afficher dans la fenetre de naviga- 
teur a la place du Flash en utilisant la methode navigateToURL a laquelle vous associez un nouvel 
objet URLRequest qui affiche la reference hypertexte mentionnee. 

■ II est preferable de tester les liens dans le contexte du navigateur, voire en ligne, lorsque ces liens se 
referent a des comportements dynamiques executes cote serveur ou par le navigateur. 
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Navigation HTML vers Flash 

Si vous realisez un site presqu'entierement en Flash et que, ponctuellement, vous appelez 
une page HTML, vous aimeriez certainement pouvoir faire un lien de retour depuis cette 
page, vers un endroit precis de votre document Flash, et pas forcement vers la premiere 
image du scenario de votre document Flash. Cela est possible en adoptant une syntaxe par- 
ticuliere pour les liens places dans la page HTML et une structure adaptee pour la construction 
du document Flash. 

Dans ce contexte, le lien HTML fait reference, en fait, a une image cle du scenario du docu- 
ment Flash en ajoutant, au nom de la page qui contient le Flash, un diese (#), suivi du nom 
d'etiquette de l'image cible : 

nomDeLaPage . html#nomDeLetiquette 

Dans cette section, nous presentons un document SWF structure en vue d'etre appele par un 
lien HTML. Le lien HTML contient, de son cote, des liens qui activent distinctement 
chacune des rubriques du Flash. 

Cette technique impose une conception de site dans le scenario, pour lequel chaque type de 
contenu est reparti, a un endroit distinct des autres. 

s0^± Exemples > ch 1 4_communicationFlashHTML_3.fla 
Exemples > ch 1 4_communicationFlashHTML_3.html 
Exemples > chl4_communicationFlashHTML_3b.html 

Dans notre exemple, nous disposons d'un document Flash dont l'interface est distribute sur 
le scenario en mode sequentiel (voir Figure 14.4). Chaque emplacement d'etiquette correspond 
a une nouvelle rubrique. 



Figure 14.4 

Apercu 
du scenario 
de la scene 
principale. 







9 a 


□ 5] 5 10 




15 20 


25 


30 




35 






40 






45 








5 


D 








Etiquettes 




□ 


accueil [ 


'en: 


a 


















D 






a 












□ 




D 






















D 










a 










^1 ch3 




□ 










D 


•1 


















il Ch2 




□ 










































il chl 




□ 


d.1 










































^] accueil 




□ 












































lienHTML.btn 




□ 


D 










menumc 




□ 


D 










^1 vegetal_mc 


• a 


□ 


D 










-%J fond_mc 


• a 


□ 


□ 














jj -J 3 






( ■□%[•]. 






1.0 ■ 1 < 















































































Ce document est place dans la page HTML "ch4_communicationFlashHTML_3.html". En 
affichant ce fichier dans le navigateur, nous constatons dans un premier temps que la page 
affiche bien l'animation (voir Figure 14.5). 
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Pour cet exemple, ne publiez pas le document SWF en faisant Fl 2 ou Fichier > Publier. Vous risque- 
riez d'ecraser la page HTML deja mise en forme et qui porte le meme nom que le document 
Flash. Pour publier le document SWF faites simplement Cmd+Entree (Mac) ou Ctrl+Entree (Win- 
dows). Pour projeter la page HTML directement dans le navigateur, lancez-la depuis le systeme 
d'exploitation. 



Figure 14.5 

Apercu dans le 
navigateur. 




En cliquant sur les liens du menu situes a gauche, vous accedez aux differentes rubriques 
mises en place dans le scenario de Flash (voir Figures 14.6 a 14.8). 





En cliquant sur le lien HTML situe en bas du document Flash, vous accedez a une page HTML 
(vue a la section precedente). Cette page HTML affiche une serie de liens codes en HTML. 
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Figure 14.7 



Chapitre 2 




>Retour page HTML 



Emensis itaque difficultatibus multis et nive 
obrutis callibus plurimis ubi prope 
Rauracum ventum est ad superciiia fluminis 
Rheni, resistente multitudine Alamanna 
pontem suspendere navium conpage 
Romani vj nimia vetabantur ritu grandinis 
undique convolantibus telis, et cum id 
inpossibile videretur, imperator 
cogitation ibus magnis attonitus, quid 
capesseret ambigebat. 

Et olim licet otiosae sint tribus pacataeque 
centuriae et nulla suffragiorum certamina 
set Pompiliani redierit securitas temporis, 
per omnes tamen quotquot sunt partes 
ten-arum, lit domina suscipitur et regina et 
ubique patrum reverenda cum auctoritate 
canities populique Romani nomen 
circumspectum et verecundum. 



Figure 14.8 




Chapitre 3 



Emen5is itaque difficultatibus multis et nive 
obrutis callibus plurimis ubi prope 
Rauracum ventum est ad superciiia fluminis 
Rheni, resistente multitudine Alamanna 
pontem suspendere navium conpage 
Romani vi nimia vetabantur ritu grandinis 
undique convolantibus telis, et cum id 
inpossibile videretur, imperator 
cogitationibus magnis attonitus, quid 
capesseret ambigebat. 

Et olim licet otiosae sint tribus pacataeque 
centuriae et nulla suffragiorum certamina 
set Pompiliani redierit securitas temporis, 
per omnes tamen quotquot sunt partes 
terrarum, ut domina suscipitur et regina et 
ubique patrum reverenda cum auctoritate 
canities populique Romani nomen 
circumspectum et verecundum. 



En cliquant sur chaque lien, vous atteignez directement 1' image du scenario qui correspond 
a la rubrique activee (voir Figure 14.9). 

Dans le document Flash, sur la scene principale, se trouve un symbole nomme menu_mc. 
Dans ce symbole, nous pouvons distinguer quatre boutons respectivement nommes 
accueil, ch1, ch2etch3 (voir Figure 14.10). 

Dans le scenario de la scene principale, chaque rubrique est placee precisement sous une 
etiquette. L' accueil est sous l'etiquette accueil. Le Chapitre 1 est sous l'etiquette chl, et 
ainsi de suite pour les Chapitres 2 et 3 (voir Figure 14.4). Vous relevez que les noms d' eti- 
quettes sont identiques aux noms d'occurrence empruntes pour les boutons du menu. 
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Figure 14.10 

Boutons de 
navigation dans 
le Flash. 




Cela n'a pas d'incidence directe sur la navigation depuis la page HTML, mais simplifie le 
codage au sein du document Flash pour une navigation interne. 

Placer un nom d etiquette sur une image du scenario. Pour placer un nom d'etiquette sur une 
image du scenario, vous devez d'abord ajouter une image cle (de preference vide), sur un caique dedie 
a cela dans le scenario, a I'endroit able. Puis, cliquez sur cette image du scenario pour en afficher les pro- 
prietes. Dans I'inspecteur de proprietes, attribuez un identifiant sans caracteres speciaux, sans espace, et 
ne commencant pas par un chiffre. Appuyez sur la touche Entree pour confirmer la saisie. 

Dans le scenario de la scene principale, sur le caique Actions, a l'image 1, le code afhche 
est le suivant : 

stop() ; 

menu_mc.addE vent List ener (MouseEvent .CLICK, at f icherRubrique) ; 
function aff icherRubrique (evt :MouseEvent) { 
gotoAndStop(evt . target. name) ; 

} 

lienHTML_bt n.addE vent List ener (MouseEvent .CLICK, lienHTML) ; 
function lienHTML (evt : MouseEvent ) { 

navigateToURL(new URLRequest( "ch14_communicationFlashHTML_2b.html" ) ) ; 

} 
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Tout d'abord, une fonction permet de naviguer a l'interieur du document Flash en cliquant 
sur les liens contenus dans le symbole menu_mc. Cette fonction utilise la propriete target qui 
etablit une relation directe entre le nom de V occurrence activee et le nom de V etiquette a 
atteindre. Si nous cliquons sur le bouton chl, son nom est done directement passe en para- 
metre de la methode gotoAndStop() et nous conduit a cette image du scenario. Cette techni- 
que nous epargne l'ajout de structures conditionnelles, pour simplement organiser une 
navigation dans le scenario. 

En dessous, figure le hen qui pointe vers la page HTML - nous l'avons utilise dans la section 
precedente. 

Ce document Flash est done autonome. Aucune relation ne l'attache a la page HTML qui s'y 
refere. Mais, ce qui permet aux liens de la page HTML de cibler la bonne rubrique, e'est qu'il 
est structure avec des etiquettes dont les noms sont repris dans les liens de la page HTML. 
Si nous revenons dans la page HTML qui porte le nom "chl4_commu- 
nicationFlashHTML_3b.html", dans Dreamweaver par exemple ou directement dans le 
code source du document, en selectionnant chaque lien individuellement, vous remarquez 
la valeur inscrite dans l'attribut href . 

Pour appeler la rubrique accueil, le lien HTML fait reference d'abord a la page qui contient 
le Flash (chl4_communicationFlashHTML_3.html), suivi directement d'un diese (#) et de 
T etiquette (accueil). Ce qui donne : 

<a href="ch14_communicationFlashHTML_3.html#accueil">texte du lien</a> 

Le principe est decline pour chaque lien de la page HTML. 

Mais, dans ce mecanisme relativement simple, nous devons souligner quelques contraintes. 

Lorsque le lien de la page HTML atteint directement une image du scenario, les ecouteurs, 
places sur la premiere image du scenario, ne sont plus actifs. Vous devez recopier chaque 
ecouteur place sur la premiere image au niveau de chaque etiquette. Les fonctions, elles, 
restent actives. II n'est pas necessaire de les dupliquer. D'autant qu'il ne peut y avoir deux 
fonctions de meme nom. Dans le caique Actions, a l'image chl, ch2 et ch3, nous pouvons 
lire le code suivant : 

stop(); 

menu_mc . addEvent List ener(MouseE vent .CLICK, af f icherRubrique) ; 

Nous avons un stop qui empeche la tete de lecture de poursuivre 1' animation. Nous pouvons 
egalement lire une nouvelle instance de 1' ecouteur deja place a l'image 1. 



I 



Tester les liens HTML sur un serveur distant. Avec certaines configurations, il est possible que 
les liens HTML qui appellent une etiquette Flash ne soient pas directement actifs sur votre poste de 
travail. Placez dans ce cas vos fichiers sur un serveur distant, et executez a nouveau les pages. Les 
liens sont bien actifs. 



A retenir 

■ II est possible de cibler directement une image du scenario dans Flash, a partir d'un lien code en HTML. 
Pour cela, nous invoquons un nom d'etiquette (#nomEtiquette) directement depuis le lien HTML 
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Historique de l animation Flash dans le navigateur 

Le bouton Suivant et Retour du navigateur peuvent controler l'affichage des contenus dans 
un document Flash. Pour cela, le site www.asual.com met a disposition les classes SWFAd- 
dress et SWFObject, gratuitement et en telechargement libre, a l'adresse suivante : http:// 
www.asual.com/swfaddress/. 

■ Installer une classe importee. Pour voir comment installer la classe nativement ou ponctuelle- 
g ment, reportez-vous au debut du Chapitre La 3D et PaperVision. Nous nous contentons, pour cet 

exemple, de citer le site referent. Une documentation detaillee et un forum sont disponibles sur leur 

site Internet. 

Ces classes fonctionnent sur le meme principe que le mecanisme des liens d'une page 
HTML vers un contenu Flash, evoque dans la section precedente. A la difference que les 
liens ne sont pas actives par la page HTML, mais par un script JavaScript interprets par le 
navigateur. 

Pour les utiliser, vous devez done creer un document Flash qui sera contenu dans une page 
HTML, laquelle fait reference a plusieurs fichiers JavaScript. Le code propose par le site 
www.asual.com pour integrer le contenu Flash est le suivant : 

<script type=" text /JavaScript " src="swf object /swfobj ect . j s"></script> 
<script type=" text /JavaScript " src="swf address /swf address . j s"></script> 
<script type=" text /JavaScript ">swf obj ect . embedSWF( 'website . swf 1 , 'website ' , 
'100%', '100%', '9' , 'expresslnstall.swf ' , {}, {menu: 'false'}, {id: 'website'}); 
</script> 

Dans Flash, vous devez ensuite placer les commandes dans le scenario. Elles seront automa- 
tiquement interpreters par le meme JavaScript utilise dans la page HTML. Dans le docu- 
ment Flash, sur la premiere image du scenario de la scene principale, le site 

www.asual.com propose les actions suivantes : 

// SWFAddress actions 

function btnClick(e:MouseEvent) { 

SWFAdd ress. set Value (e. target .deepLink) ; 

} 

function btnRollOver(e:MouseEvent) { 

SWFAddress . setStatus (e . target . deepLink) ; 

} 

function btnRollOut(e:MouseEvent) { 
SWFAddress . resetStatus ( ) ; 

} 

// SWFAddress handling 

function handleSWFAddress(e:SWFAddressEvent) { 
try { 

if (currentFrame == 2 && e. value == '/') { 

play(); 
} else { 

gotoAndStop( '$' + e. value); 

} 

} catch(err) { 

gotoAndStop( ' $/error/ ' ) ; 

} 
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var title: St ring = 'SWFAddress Website'; 

for (var i = 0; i < e . pathNames . length ; i++) { 

title +='/'+ e . pathNames [ i] . substr(0, 1 ). toUpperCase ( ) + e.path- 
Names [i] .substr(1 ) ; 

} 

SWFAddress. setTitle(title) ; 

} 

SWFAdd ress.addE vent List ener(SWFAddressEvent .CHANGE, handleSWFAddress) ; 
stop(); 

Nous distinguons les differentes fonctions faisant reference a des occurrences de MovieClip 
distributees dans le scenario a chaque niveau d'etiquette. Ces fonctions sont done valides 
pour toute la duree du scenario. La variable deepLink est simplement mise a jour en fonc- 
tion de l'objet active (target). C'est done l'etiquette invoquee qui est differente en fonction 
de l'objet active. 

Dans le scenario, a chaque nouvelle rubrique, utilisez un nom d'etiquette qui reprend cette 
syntaxe: 

$/portfolio/ 

Ce nom commence avec le caractere dollar. Puis, un nom, sans caracteres speciaux ni accent 
est place entre deux slashs. 

A l'interieur de chaque MovieClip - qui est utilise comme bouton et dont la navigation doit 
etre controlee par JavaScript -, www.asual.com propose d'utiliser le code suivant : 

this . deepLink = '/about/'; 
this . buttonMode = true; 

this. addEventListener(MouseEvent. CLICK, (parent as MovieClip) . btnClick) ; 
this.addEventListener(MouseEvent.ROLL_OVER, (parent as MovieClip) . btnRollOver) ; 
this.addEventListener(MouseEvent.ROLL_OUT, (parent as MovieClip) . btnRollOut) ; 

Dans ce code, nous relevons principalement l'affectation d'une nouvelle valeur pour la 
variable deepLink, qui vehicule la cible a atteindre par le bouton clique. Cette valeur, enre- 
gistree par JavaScript, va permettre au navigateur de controler toute la navigation a l'inte- 
rieur du document Flash. 

Enfin, dans le dossier de votre document Flash, vous devez placer les elements suivants : 

• la classe intitulee SWFAddress . as ; 

• la classe intitulee SWFAddressEvent . as ; 

• le dossier de scripts swf address/ ; 

• et le dossier de scripts swf obj ect/. 

Publiez le document SWF. En activant les liens du menu, le document Flash defile normale- 
ment. Mais les commandes de l'historique du navigateur enregistrent votre navigation. En 
activant les boutons Suivant et Retour, vous pouvez revenir dans le document Flash comme 
si vous naviguiez de page HTML en page HTML. 

Pour utiliser et tester un fichier Flash dans un environnement deja mis en forme, vous 
pouvez telecharger le dossier compresse de presentation deja structure, et disponible 
directement en ligne. Pour des raisons liees a la protection des droits d'auteurs, nous ne 
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pouvons pas inclure ces ressources dans notre ouvrage. Vous pouvez en revanche les 
telecharger librement a l'adresse suivante : http://sourceforge.net/projects/swfaddress/ 
flles/swfaddress/SWFAddress%202.4/swfaddress-2.4.zip/download. Dans le repertoire 
telecharge, differentes configurations sont proposees. Pour un developpement en 
ActionScript 3, utilisez les elements du repertoire CS3 mis a disposition dans le dossier 
Samples. 

A retenir 

■ II est possible d'activer les boutons Retour et Suivant du navigateur pour creer un historique de la 
navigation dans Flash. Pour cela, nous utilisons la classe SWFAddress et SWFObject disponible gra- 
tuitement sur le site www.asual.com. 



Importer du HTML dans un SWF 

Plus qu'une simple fonctionnalite, l'integration de contenus formates avec des balises 
HTML est une solution presque incontournable quand il s'agit d'integrer des contenus edi- 
toriaux. Sans avoir a recourir a des systemes de gestion de contenu, il demeure assez facile 
d'importer et de mettre en forme des textes et des images avec des feuilles de style. Pour 
cela, nous utilisons un champ de texte dynamique et, eventuellement, un composant 
ScrollBar (ou un ascenseur fait maison, comme vu au Chapitre 2). 

Dans cette section, nous utilisons une interface en Flash qui charge un fichier texte et une 
feuille de style au format CSS (voir Figure 14.11). 
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©Exemples > ch14_communicationRashHTML_4fla 
Exemples > html > styles. ess 
Exemples > html > texte.txt 



Dans le document "chl4_communicationFlashHTML_4.fla", a droite de la scene princi- 
pal, est place un aplat de couleur (forme graphique). Au-dessus, un champ de texte dyna- 
mique porte le nom d'occurrence contenu_txt. A sa droite, un composant ScrollBar 
porte le nom d'occurrence ScrollBar (voir Figure 14.12). 



Figure 14.12 

Apercu du 
document. 




Dans l'inspecteur de composants (Fenetre > Inspecteur de composants), la propriete 
scrolltargetName, qui definit le champ de texte a controler, fait reference au nom de notre 
champ de texte dynamique (voir Figure 14.13). 



Figure 14.13 

Fenetre 
Inspecteur de 
composants. 



| UlScrollBar. <scrollBar> fa 
f~Parametres Liaisons Schema 1 



Nom 

direction 

scrollTargetName 
visible 



Vatwif 
vertical 
contenu_txt 
true 
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En dehors du document Flash, dans le dossier html/, place dans le repertoire des exemples 
du livre, nous disposons d'un richier nomme texte . txt qui affiche en partie le code suivant : 

content=<p class="titre">A la une</p><p><i>de Arzhur CAOUISSIN</i><br><li><b> 
Source :</b> Les marais salant de Guerande</li><li><b>Site Web :</b> <a href= 
"http: //www. ot-guerande.fr / " target="_blank"><span class="lien">http: / /www.ot- 
guerande .f r</span></a></li></p><p><img src=" images /gale rie/ vignettes /photo2- 
vignette.jpg" vspace="0" hspace="5">Lorem ipsum dolor sit amet, consectetuer 
adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore 
magna aliquam erat volutpat. Ut wisi enim ad minim veniam, .../... </p> 

Une variable du nom de content ouvre sur une serie de balises HTML qui organisent le flux 
d'un texte et contiennent, parfois, des references a des classes CSS (.titre, .lien) ou a 
des balises d'apparence modifiee, dans la feuille de styles (p). Les images importees sont, 
elles, deja placees localement dans le repertoire images du dossier des exemples du livre. 

Le dossier html/ des exemples du livre accueille cette feuille de style qui adopte la forme 
suivante : 

P { 

font -family : Arial, Helvetica, sans-serif ; 
font-size: 12px; 
color: #001622; 
} 

.titre { 

font -family : Arial, Helvetica, sans-serif ; 
font-size: 24px; 
color: #001622; 
} 

.lien { 

font -family : Arial, Helvetica, sans-serif ; 

font-size: 12px; 

color: #001622; 

text-decoration: underline; 

} 

Dans le scenario du document Flash, le composant Scrollbar et le texte dynamique sont 
repartis entre les formes d'habillage graphique et le caique Actions (voir Figure 14.14). 



Figure 14.14 

Apercu du 
scenario de la 
scene principale. 
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Le caique Actions affiche le code suivant : 
// Charge les CSS 

var chargeurCSS:URLLoader = new URLLoader(); 
chargeurCSS.load(new URLRequest( "html/styles. ess") ) ; 
chargeurCSS.addEventListener( Event .COMPLETE, CSSchargees) ; 
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// Applique les CSS 

function CSSchargees(evt:Event) { 

var stylesCSS: Stylesheet = new Stylesheet () : 

stylesCSS . parseCSS (evt . currentTarget . data) ; 

contenu_txt . styleSheet=stylesCSS; 

chargerLeTexte ( ) ; 

} 



// Charge le texte 
function chargerLeTexte( ) { 

var chargeurTexte : URLLoader = new URLLoader(); 

chargeurTexte.load(new URLRequest( " html/texte . txt " ) ) ; 

chargeurTexte . addEventListener( Event .COMPLETE, place rLeTexte) ; 

} 

// Place le texte 

function placerLeTexte(evt:Event) { 

var cheminVariable : URLVariables=new URLVariables (evt . currentTarget. data) ; 
contenu_txt . condenseWhite=true ; 

contenu_txt . htmlText=St ring (cheminVariable . content ) ; 

} 

Dans cette application, nous activons le chargement des contenus textes et CSS en quatre 
temps. D'abord, nous chargeons les styles. Puis, nous les appliquons au conteneur du 
futur texte. Une fois les styles appliques, nous pouvons importer le texte dans ce champ 
dynamique. 

La premiere etape charge la feuille de style : 
// Charge les CSS 

var chargeurCSS:URLLoader = new URLLoader(); 
chargeurCSS. load (new URLRequest ( "html/ styles. ess" ) ) ; 
chargeurCSS.addEventListener( Event .COMPLETE, CSSchargees) ; 

II s'agit d'un chargeur tout simple qui execute une fonction une fois le chargement com- 
plete. La fonction appelee applique ensuite les styles, sur le champ de texte dynamique : 

// Applique les CSS 

function CSSchargees(evt:Event) { 

var stylesCSS:StyleSheet = new StyleSheet() ; 

stylesCSS. parseCSS (evt . currentTarget . data) ; 

contenu_txt . styleSheet=stylesCSS ; 

chargerLeTexte ( ) ; 

} 

Dans cette fonction, nous definissons, dans un premier temps, un objet feuille de style qui 
va stocker les styles avant de les appliquer. Nous compilons ensuite les balises CSS avec un 
parseur CSS interne a Flash, pour que le code soit correctement interprets par Flash. Les 
donnees chargees (evt . currentTarget .data) sont passees en parametre du parseur CSS. 
Le parseur affecte les styles a l'objet Stylesheet que nous venons d'instancier. 

Puis, nous appliquons la feuille de style sur le champ de texte dynamique, a l'aide de la pro- 
priety stylesheet. 
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La fonction qui charge le texte est ensuite appelee : 

// Charge le texte 
function chargerl_eTexte( ) { 

var chargeurTexte : URLLoader = new URLLoader( ) ; 

chargeurTexte. load (new URLRequest ( "html/ texte. txt" ) ) ; 

chargeurTexte. addEventListener(Event. COMPLETE, placerLeTexte) ; 

} 

Une fois le texte complete, la fonction appelee place le texte formate dans le champ de texte 
dynamique : 

// Place le texte 

function placerLeTexte(evt:Event) { 

var cheminVariable:URLVariables=new URLVariables(evt .currentTarget .data) ; 
contenu_txt .condenseWhite=true; 

contenu_txt .htmlText=St ring (chemin Variable. content) ; 

} 

Dans cette derniere fonction, nous creons un objet de traitement de variable URLVariables, 
afin de contenir l'ensemble du code qui se situe, a l'interieur du fichier texte . txt, apres le 
signe egal. Cette variable appelle en parametre le texte que nous venons de charger pour 
s'en approprier naturellement le contenu. 

La propriete condenseWhite permet de supprimer les espaces blancs redondants, comme le 
fait tout interpreteur HTML. 

La derniere instruction ajoute le texte charge, dans le champ dynamique situe sur la scene, a 
l'aide de la propriete htmlText. Mais il le convertit au passage sous la forme d'une chaine 
de caracteres (transtypage avec la methode St ring ( )), afin d'eviter que les balises de for- 
matage soient egalement affichees dans le flux du texte. 

A retenir 

■ Le HTML peut etre importe dans un document Flash et associe a une feuille de style CSS. Pour cela, 
nous utilisons la methode parseCSS( ). 

■ II n'est pas necessaire de stocker les balises dans un flux XML. Un simple fichier texte peut suffire a 
contenir les elements importes. Nous utilisons alors un objet URLVariable pour traiter les donnees. 



Gerer le Flash transparent 

Un document Flash affiche, par defaut, une couleur d'arriere-plan. Vous pouvez indiquer au 
document HTML de ne pas interpreter cette donnee en vue de rendre transparent l'arriere- 
plan du document Flash. 

Lobjectif de cette modification est de permettre d'entrevoir le contenu de la page HTML 
generalement placee sous 1' animation Flash. Cette technique est employee aussi bien pour 
agrementer des contenus qui doivent se coordonner avec une image d'arriere-plan placee 
dans une page HTML beaucoup plus large, ou avec un motif repete a 1' arriere-plan de la 
page HTML, par exemple. Mais elle est aussi employee dans des sites editoriaux pour 
placer des annonces commerciales au premier plan sur des articles de fond, ou encore 
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permettre a des menus HTML / CSS de passer au devant (index-z) d'animations SWF. 
Sans la transparence de celui-ci cela ne serait effectivement pas possible. 

Pour appliquer un fond transparent a un document SWF, dans la page HTML qui le contient, 
ajoutez un parametre wmode et affectez la valeur transparent : 

<param name= "wmode" value="transparent"> 

Assurez-vous que cette option est egalement renseignee dans les balises embed et dans les 
parametres du JavaScript qui controle eventuellement l'affichage du document Flash (voir 
Chapitre 15). 

Attention, cette option peut perturber rafhchage des caracteres dans les champs de texte 
dynamiques, surtout s'ils sont isoles par un masque, meme en ajoutant les caracteres au 
champ de texte dynamique, particulierement a partir de Firefox 2 (voir aussi la section 
Gerer la typographic au Chapitre 15). 

A retenir 

■ Afin de convertir I'arriere-plan d'un document SWF en fond transparent, nous definissons, dans la 
page HTML qui contient I'animation Flash, le parametre wmode a la valeur transparent. 



Synthese 

Dans ce chapitre, vous avez appris a etablir des liaisons entre un contenu realise en Flash et 
la page HTML qui le contient, et done, a personnaliser l'affichage d'un document Flash 
selon la page HTML qui s'y re fere. Vous avez egalement appris a organiser un historique de 
navigation, a personnaliser le menu contextuel de Flash et a importer du HTML dans une 
zone Flash. Vous savez desormais facilement integrer vos developpements dans un site web 
et favoriser les echanges entre contenus HTML et Flash. Des techniques complementaires 
propres a 1' implementation du Flash dans le navigateur sont abordees dans le chapitre suivant. 
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Introduction 

Par gestion de sites Full Flash, nous entendons le recours exclusif a la technologie Flash 
pour mettre en forme un contenu web. Le contenu affiche est etendu a la surface de la fene- 
tre du navigateur la plus large possible, voire, sur toute la surface de 1' ecran. 

Naturellement, meme dans un site tout en Flash, une premiere page HTML sera necessaire 
pour le contenir (generalement "index.html"). C'est, entre autres, dans cette page - a l'aide 
de parametres HTML - que nous specifions aussi la maniere dont le contenu Flash peut 
etre deploye, avec un affichage elastique ou en mode plein ecran. Nous completons ces 
parametrages a l'aide d' instructions codees naturellement en ActionScript. 

Realiser un site tout en Flash peut rapidement isoler l'utilisateur dans un dispositif her- 
metique. Nous vous recommandons de repondre aux exigences minimales des regies 
d'ergonomie et d'accessibilite lorsque vous choisissez ce type de presentation. Dans ce 
chapitre, nous proposons une option pour basculer 1' affichage en mode plein ecran, a un 
mode normal. Ceci afin de permettre a l'utilisateur de revenir librement a d' autres 
taches sur son poste de travail sans se sentir oblige de subir un mode de navigation 
impose. 

Nous allons voir aussi comment organiser les contenus dans Flash, afin de rendre le site 
structurellement elastique avec toutes les dimensions d' ecran, mais surtout, comment ne pas 
distordre les contenus distribues lorsqu'ils sont redimensionnes. 

II est important enfin de pouvoir integrer tout type de contenu dans un site realise exclusive - 
ment en Flash. Nous parcourons egalement, en fin de chapitre, la gestion du PDF a travers 
Flash ainsi que 1' importation de la typographic y compris a travers des champs de texte 
dynamiques. 

A Tissue de ce chapitre, vous serez en mesure de creer des interfaces etendues qui valorisent 
spatialement les contenus. 

Basculer en mode plein ecran et restaurer I'affichage 
standard 

Qu'y a-t-il de plus valorisant que de voir son travail projete en plein ecran ? Lorsque 1' affi- 
chage en mode plein ecran est employe a bon escient, cette option peut reellement offrir une 
nouvelle dimension pour organiser les contenus. La surface alors disponible pour les 
deployer, pour un ecran de resolution standard de 1 024 x 768 pixels, passe radicalement 
de 960 x 550 pixels, en moyenne, a 1 024 x 768 pixels. Les images, les videos, la 3D, 
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prennent une toute autre dimension. Mais, naturellement, etendre la surface des contenus 
suppose quelques precautions : 

• La bande passante de l'utilisateur, d'abord, elle, ne change pas. II convient done de ne 
pas profiter de cette surface supplementaire pour augmenter le poids des contenus a 
charger. 

• L'utilisateur qui navigue ponctuellement dans votre creation a en outre besoin de pou- 
voir quitter le mode plein ecran facilement pour revenir a une autre tache. Nous 
devons done organiser la gestion de l'affichage de sorte que l'ergonomie reste viable 
en toute circonstance, avec un bouton de restauration de l'affichage en mode normal, 
par exemple. 

Dans cette section, nous etudions le basculement de l'affichage en mode plein ecran, ainsi 
que la restauration de l'affichage en mode normal. 

Exemples > ch 1 5_siteFullFlash_ I .fla 

Dans le document "chl5_siteFullFlash_l.fla", sur la scene principale, nous pouvons voir le 
MovieClip f ond_mc, une image isolee dans un autre MovieClip, puis un bouton et un mas- 
que (voir Figures 15.1 et 15.2). A droite de la scene, le symbole pleinEcran_btn contient 
deux boutons repartis sur deux images distinctes. C'est un bouton a "bascule". Lorsque 
l'affichage est normal, la premiere image est affichee. Mais des que l'affichage bascule en 
mode plein ecran, c'est la seconde image qui apparait. 



Figure 15.1 

Apercu 
de la scene 
principale. 
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Figure 15.2 

Scenario de la 
scene principale. 
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Dans la fenetre de scenario, le caique actions affiche le code suivant : 

// initialisation 

pleinEcran_btn.gotoAndStop(1 ) ; 
pleinEcran_btn . buttonMode=true ; 



// actions 

pleinEcran_btn . addE vent List ener(MouseE vent .CLICK, affichagePleinEc ran) ; 

function affichagePleinEcran(evt:MouseEvent) { 
if (stage. displayState==StageDisplayState. NORMAL) { 
stage . displayState=StageDisplayState . FULL_SCREEN ; 
pleinEcran_btn.gotoAndStop(2) ; 
} else { 

stage .displaySt at e=StageDisplayState .NORMAL; 

pleinEcran_btn.gotoAndStop(1 ) ; 

} 

} 

Le code de la page HTML qui accompagne ce document ("chl5_siteFullFlash_l.html"), 
integre le Flash en utilisant les parametres suivants : 

<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http: // 
download. mac romedia. com / pub /Shockwave/ cabs /f lash /swf lash. cab#version=1 0,0, 0,0" 
width="800" height="600" id="ch15_siteFullFlash_1 " align="middle"> 

<param name="allowScriptAccess" value="sameDomain" /> 

<param name="allowFullScreen" value="true" /> 

<param name="movie" value="ch15_siteFullFlash_1 .swf " /> 

<param name="quality" value="high" /> 

<param name="bgcolor" value="#ffffff " /> 

<embed src="ch15_siteFullFlash_1 .swf " quality="high" bgcolor="#ffffff " 
width="800" height="600" name="ch15_siteFullFlash_1 " align="middle" 
allowScriptAccess="sameDomain " allowFullScreen="true" type="application/x 
-shockwave-flash" pluginspage="http: //www. adobe.com/go/getflash-player_fr" /> 
</object> 

Dans notre exemple, le mecanisme de l'affichage plein ecran s'execute sous controle du 
navigateur. Le document Flash n'est interprete que par le lecteur Flash. Ann d'autoriser le 
navigateur a basculer l'africhage du Flash en mode plein ecran, nous devons done ajouter un 
parametre dans la page HTML qui accueille le Flash. 

Pour autoriser l'africhage en mode plein ecran, dans la page HTML, au niveau des balises 
qui gerent l'affichage du document Flash, vous devez ajouter le parametre AllowFull- 
Screen et le definir sur true, y compris dans la balise embed : 

<param name="allowFullScreen" value="true" /> 
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Pour ce faire, vous pouvez l'ajouter manuellement a votre mise en forme, en saisissant 
directement dans le code. Vous pouvez aussi generer automatiquement une page HTML 
simple, avec ce parametre, depuis Flash. 

1. Pour publier une animation au format SWF avec une page HTML qui autorise l'affi- 
chage en mode plein ecran, dans Flash, affichez les parametres de publication, en 
faisant Fichier > Parametres de publication. 

2. Dans l'onglet HTML, dans le menu Modele, selectionnez 1' option Flash seulement avec 
Autorisation du Plein ecran (voir Figure 15.3). 



Figure 15.3 
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3. Puis, cliquez sur le bouton Publier, en bas de cette fenetre, pour generer le document 
HTML et SWF. 

Attention, le code HTML genere par Flash utilise trois portes pour inclure un objet SWF : 
la balise object, la balise embed et une fonction JavaScript : AC_FL_RunContent. Les 
navigateurs modernes se servent de ce JavaScript pour implementer le Flash dans la page. 
II faut done s' assurer que les parametres adequats sont egalement bien presents dans cette 
partie du code : 



' allowFullScreen ' 



'true 1 



Pour tester l'affichage en plein ecran, il faudra maintenant executer le document SWF a 
partir de la page HTML, dans le navigateur, et non simplement a partir du fichier SWF lui- 
meme. 

Une fois que la page HTML dispose du parametre AllowFullScreen, les actions du document 
Flash qui definissent l'affichage, peuvent etre ajoutees. 

La programmation d'un systeme d'affichage en mode plein ecran, dans Flash, est astreinte a 
l'evenement MouseEvent. Les autres evenements n'autorisent pas ce type d'affichage pour 
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eviter naturellement les utilisations malveillantes de cette fonctionnalite. Seule une partici- 
pation intentionnelle de l'utilisateur peut activer ce mode d'affichage. 

Deactivation des contrdles du clavier en plein ecran. Notez que I 'affichage en mode plein 
ecran desactive les controles du clavier. Seul une exportation au format AIR preserve ces options, mais 
ce format n'est reserve que pour le developpement d'applications de bureau, hors fenetre du naviga- 
teur. Nous ne I'utilisons pas dans le cadre de la realisation d'un site web. Pour en savoir plus sur la 
technologie AIR, consultez le site http://www.adobe.com/fr/products/air/. 



Activer ('acceleration materielle pour les contenus riches. Par defaut, le contenu Flash est 
execute avec le processeur. Pour ameliorer les performances d'affichage des contenus riches 
(videos, 3D, calculs graphiques permanents] affiches en plein ecran par exemple, il est possible d'acti- 
ver 1'acceleration materielle du poste utilisateur. Pour cela, utilisez le parametre wmode avec la valeur 
GPU, directement dans le code de la page HTML qui contient le Flash. Si la carte graphique du poste 
client est assez puissante, elle prendra en charge I'affichage du contenu Flash. Attention, ce mode 
peut modifier legerement I'aspect des contenus. II doit, de preference, n'etre active que pour un seul 
document SWF a la fois, afin de garantir la stabilite de I'affichage dans la fenetre du navigateur. Pour 
activer ce mode depuis Flash, dans les parametres de publication, dans la partie avancee de I'onglet 
Flash, selectionnez I'option Niveau 2-GPU du menu Acceleration materielle (voir Figure 15.4). 



Figure 15.4 
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Dans le document Flash, le programme demarre sur 1' initialisation : 

// initialisation 

pleinEcran_btn.gotoAndStop(1 ) ; 
pleinEcran_btn . buttonMode=true ; 

Nous indiquons dans un premier temps de caler le bouton a bascule, sur la premiere image 
avec la methode gotoAndStop ( ) . Afin de laisser egalement apparaitre la main au survol du 
MovieClip, nous passons la propriete buttonMode sur true. 

Plus bas, un ecouteur affecte une action au bouton sur un evenement souris (Mouse- 
Event .CLICK). Cette action active I'affichage du mode plein ecran : 
// actions 

pleinEcran_btn . addEventListener(MouseE vent .CLICK, at f ichagePleinEcran) ; 
function affichagePleinEcran(evt:MouseEvent) { 
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if (stage. displayState==StageDisplayState. NORMAL) { 
stage . displayState=StageDisplayState . FULL_SCREEN ; 

pleinEcran_btn.gotoAndStop(2) ; 
} else { 

stage . displaySt ate=St ageDisplay Stat e . NORMAL ; 

pleinEcran_btn.gotoAndStop(1 ) ; 

} 

} 

Nous pouvons basculer 1' ensemble du document (stage) ou un conteneur. II suffit de speci- 
fier le nom de l'objet a projeter et de lui appliquer la propriete displayState qui designe 
son etat en plein ecran d'affichage. Dans notre exemple, toute la scene est basculee en mode 
plein ecran. C'est done l'objet stage qui recoit la propriete displayState. Nous definis- 
sons, pour cet objet, le type d'affichage a l'aide de la valeur stageDisplay- 
State . FULL_SCREEN : 

stage . displayState=StageDisplayState . FULL_SCREEN ; 

Nous avons ajoute une condition qui verifie l'etat d'affichage. Si 1'affichage est normal, 
nous basculons en plein ecran. Si, inversement, l'etat d'affichage est deja en plein ecran, 
nous specifions Taction inverse, de restaurer 1'affichage : 

stage . displayState=StageDisplayState . NORMAL ; 

Pour basculer d'une icone a une autre, nous ajoutons aussi une action gotoAndStop( ) qui 
cible l'image correspondant a Taction disponible pour chaque mode d'affichage. Cette 
condition permet d'appliquer une action a bascule sur un meme et unique bouton. Mais 
vous pouvez bien entendu separer les instructions pour les isoler sur des objets distincts. 

En projetant la page HTML dans le navigateur, et en activant le bouton pleinEcran_btn, le 
site apparait en plein ecran. En cliquant a nouveau, il revient a un affichage normal (voir 
Figure 15.5). 
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Quitter le mode Plein ecran avec Echap. Independamment des controles de bouton develop- 
pes manuellement, Flash active, par defaut, une option de restauration de I'affichage si vous appuyez 
sur la touche Echap du clavier. Un message apparaft pour prevenir de cette option des le passage en 
mode plein ecran. II n'y a pas de controle pour modifier ce message afin de garantir a tout utilisateur 
une sortie possible, quel que soit le type de developpement ajoute. Mais nous pouvons detecter 
Taction sur le bouton esc... pour repositionner notre bouton bascule a son etat normal : 

stage . addE vent List ener(FullScreenEvent . FULL_SCREEN, ecoute) ; 
function ecoute (evt : FullScreenEvent) { 
if (! event. fullscreen) { 

pleinEcran_btn.gotoAndStop(1 ) ; 

} 

} 

A retenir 

■ Le mode d'affichage en plein ecran se definit par la propriete stageDisplayState. 

■ Pour activer I'affichage en mode plein ecran, la page HTML qui contient le Flash doit egalement 
contenir le parametre AllowFullScreen et le passer sur true. 

■ Les actions de clavier sont inactives en mode plein ecran. 

■ Le mode plein ecran n'est disponible qu'a travers une action souris. 




Interface elastique flottante 

Le principe d'une interface elastique est d'appliquer, pendant le redimensionnement de la 
fenetre du navigateur, les proportions de cette fenetre au document Flash, dans le but de 
remplir systematiquement la surface de la fenetre quelles qu'en soient les dimensions. 

Cela se construit initialement de maniere assez simple puisqu'il suffit de renseigner une lar- 
geur et une hauteur de 100 % dans les proprietes de dimensions du Flash du document 
HTML. Mais si Ton ne veut pas que les contenus soient deformes, et qu'ils occupent, mal- 
gre tout, l'integralite de la surface de la fenetre, seules des instructions en ActionScript per- 
mettent de redistribuer les contenus en controlant leurs dimensions, leurs proportions et 
leurs positions en X et Y. 

Dans cette section, nous allons voir comment placer des MovieClip dans la scene de sorte 
qu'elle s'etende, quelle que soit la faille de la fenetre, mais sans jamais distordre les contenus ni 
laisser de vide dans le document. 



Exemples > chl 5_siteFullFlash_2.fla 



Dans le document "chl5_siteFuiiFlash_2.fla", sur la scene, nous distinguons a l'arriere-plan 
une image de 800 x 600 pixels placee dans un MovieClip contenu_mc (voir Figure 15.6). 
Au-dessous, a droite, apparait un MovieClip texteDroite_mc, qui contient le titre du livre. 
A gauche, un autre MovieClip affiche le logo de l'editeur. Le filet est integre dans le clip du 
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bandeau bleu, cale, lui, en bas de la fenetre. Tout en haut du document, apparait aussi un 
symbole nomme carte_mc qui represente le departement du Vaucluse. 



Figure 15.6 

Apercu du 
document. 





Figure 15.7 

Scenario de la 
scene principale. 
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Dans la fenetre Actions (voir Figure 15.7), nous pouvons lire le code suivant : 

// initialisation 

stage . scaleMode=StageScaleMode . N0_SCALE ; 
stage . align=StageAlign .TOP_LEFT; 

// actions 

stage. addEventl_istener(Event. RESIZE, quandResizeActif ) ; 
function quandResizeActif (event:Event) { 
modif ierAff ichage( ) ; 

} 

function modif ierAff ichage ( ) { 

// 

logo_mc . x=20; 

logo_mc .y=stage. stageHeight-35; 

// 

texteDroite_mc .x=stage . stageWidth-20; 
texteDroite_mc .y=stage . stageHeight-35; 
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// 

bandeaujnc . x=stage . stageWidth/2 ; 

bandeaujnc .y=stage . stageHeight- (bandeau_mc . height 12) ; 
bandeaujnc .width=stage . stageWidth ; 

// 

contenu_mc.x=0; 
contenu_mc.y=0; 

contenu_mc .width=stage . stageWidth ; 

contenujnc . height=stage . stageHeight ; 

if (contenu_mc.scaleX<=contenu_mc.scaleY) { 

contenujnc . scaleX=contenujnc . scaleY; 
} else { 

contenujnc . scaleY=contenujnc . scaleX; 

} 

} 

modif ierAf f ichage ( ) ; 

La scene, en ActionScript 3, possede des proprietes de largeur (stageWidth) et de hauteur 
(stageHeight), que nous avons deja rencontrees dans les chapitres precedents. Grace a ces 
proprietes, nous connaissons a tout moment les dimensions du document. Nous pouvons 
done recuperer ces valeurs pour redefinir, dynamiquement, 1' emplacement des objets par 
rapport a la taille du document. 

Nous pouvons, par exemple, jouer sur les positions X et Y, pour caler systematiquement un 
logo en bas et a gauche. Nous pouvons, aussi, dans le cas oil certains elements doivent etre 
redimensionnes, modifier leurs proprietes width et height en proportions des largeur et hauteur 
de la scene. 

Dans cet exemple, nous placons les objets tantot selon la largeur du document, tantot selon 
sa hauteur. Pour deux d'entre eux, l'image de fond ainsi que le bandeau du bas, nous redefi- 
nissons leurs dimensions en proportion des dimensions de la scene. 

Dans la premiere partie du code, nous definissons le comportement de l'affichage de la 
scene par defaut : 

// initialisation 

stage . scaleMode=StageScaleMode . N0J3CALE ; 

La propriete scaleMode permet d'indiquer si les contenus sont deformes ou non lorsque la 
taille de la fenetre du document est modifiee. La valeur stageScaleMode . N0_SCALE indique 
qu'aucune deformation n'est appliquee aux contenus. 

Modes d'affichage de la scene. II existe quatre modes d'affichage de la scene courante : 
N0_SCALE, EXACT j^ IT, NOjBORDER et SH0W_ALL. Elles definissent le comportement des objets dans 
la scene, lors du redimensionnement du document Flash dans la fenetre de navigateur. Les modifica- 
tions de propriete width et height, ajoutees eventuellement en ActionScript sur des objets demeurent 
prioritaires sur ces options-ci. 

■ N0_SCALE empeche les modifications d'echelle des contenus meme si les dimensions de la fenetre 
sont modifiees. 

■ EXACT_FIT autorise la distorsion des contenus selon I'exacte proportion des dimensions de la 
fenetre. 
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■ N0_B0RDER preserve les proportions de la scene quelle que soit la taille de la fenetre. La scene est 
agrandie et recadree si necessaire. Le contenu occupe toujours integralement la fenetre. 

■ SH0W_ALL preserve egalement les proportions de la scene et I'agrandit si necessaire, mais ne 
recadre jamais le contenu. Des marges sont ajoutees autour de la scene si les proportions de la 
fenetre sont differentes de celles de la scene. 

La deuxieme instruction emploie la propriete align qui definit l'alignement de la scene, lors- 
que la fenetre est redimensionnee : 

stage . align=StageAlign . TOP_LEFT; 

Dans notre exemple, la valeur TOP_LEFT designe un calage en haut et a gauche. Ainsi, si 
nous n'avions pas modifie dynamiquement le positionnement de tous les objets, ils reste- 
raient a leur place actuelle et le redimensionnement de la fenetre impliquerait l'ajout de 
marges a droite et en bas du document. 



.e langage 


Proprietes d'alignement de la scene 




■ BOTTOM. La scene est alignee sur le bas. 




■ BOTTOM_LEFT. La scene est alignee sur le coin inferieur gauche. 




■ B0TT0M_RIGHT. La scene est alignee sur le coin inferieur droit. 




—i 


■ LEFT. La scene est alignee sur la gauche. 

■ RIGHT. La scene est alignee sur la droite. 

■ TOR La scene est alignee sur le haut. 

■ TOP_LEFT. La scene est alignee sur le coin superieur gauche. 

■ T0P_RIGHT. La scene est alignee sur le coin superieur droit. 





Nous detectons ensuite le redimensionnement de la fenetre en ajoutant un ecouteur a la 
scene (stage). La propriete RESIZE permet d'executer la fonction durant chaque redimen- 
sionnement de fenetre et uniquement la : 

// actions 

stage. addEventListener(Event. RESIZE, quandResizeActif ) ; 
function quandResizeActif (event:Event) { 
modif ierAff ichage( ) ; 

} 

La fonction invoquee appelle une autre fonction, autonome : 
modif ierAff ichage ( ) ; 

Nous avons choisi d'isoler les actions dans une deuxieme fonction afin de permettre de les 
appeler depuis differents emplacements et selon differents types d'evenements. En l'occur- 
rence, nous souhaitons executer les instructions pendant le redimensionnement, mais aussi 
des l'ouverture du document. Si nous ne redefinissions pas le positionnement des l'ouver- 
ture de 1' animation, nous risquerions en effet d'observer un saut ou un decalage entre la 
position courante et celle qui est redefinie au premier redimensionnement. 



La gestion de sites Full Flash 



447 



La fonction appelee redefinit les proprietes x, y, width et height des differents contenus 
selon les largeurs et hauteur de la scene : 

function modif ierAf f ichage ( ) { 

// 

logo_mc.x=20; 

logojnc .y=stage. stageHeight-35; 

// 

texteDroite_mc .x=stage.stageWidth-20; 
texteDroite_mc .y=stage. stageHeight-35; 

// 

bandeaujnc . x=stage . stageWidth/2 ; 

bandeaujnc .y=stage.stageHeight- (bandeau_mc. height 12) ; 
bandeaujnc . width=stage . stageWidth ; 

// 

contenu_mc .x=0; 
contenujnc. y=0; 

contenu_mc . width=stage . stageWidth ; 

contenu_mc .height=stage. stageHeight; 

if (contenu_mc.scaleX<=contenu_mc.scaleY) { 

contenu_mc . scaleX=contenu_mc . scaleY; 
} else { 

contenujnc . scaleY=contenu_mc . scaleX; 

} 

} 

Les premieres lignes recuperent simplement les valeurs stage . stageWidth et stage . stage- 
Height. Des marges sont toutefois ajoutees ou soustraites en fonction de la position reelle- 
ment souhaitee pour chaque objet. Par exemple, le symbole logo_mc est place systemati- 
quement a 20 pixels du bord gauche de la fenetre, mais toujours cale en bas a 35 pixels du 
bord (stage . stageHeight-35 equivaut a dire : la hauteur moins 35 pixels). 

Lorsque vous positionnez les objets, pensez a tenir compte de leur point d'alignement (cen- 
tre) et de leur hauteur ou largeur. Ceci est determinent pour caler parfaitement les elements 
dans la scene. 

Le MovieClip bandeaujnc est positionne en Y selon la meme hauteur de fenetre. Mais il est 
egalement redimensionne en largeur (width) selon la largeur effective de la fenetre. Le sym- 
bole occupe done toute la largeur de la scene quelle qu'en soit la taille. Nous avons bien 
entendu pris soin d'y placer des graphismes qui supportent cette distorsion. 

La derniere partie de la fonction affecte egalement les positions X et Y, ainsi que les dimensions 
width et height de l'objet contenu_mc. Mais, nous ajoutons ici une condition : 

contenujnc.x=0; 
contenujnc.y=0; 

contenujnc .width=stage . stageWidth ; 

contenujnc . height=stage . stageHeight ; 

if (contenujnc. scaleX<=contenujnc. scaleY) { 

contenujnc . scaleX=contenujnc . scaleY; 
} else { 

contenujnc . scaleY=contenujnc . scaleX; 

} 
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Lorsque la fenetre est etiree en largeur, pour remplir la surface de la fenetre, nous devons 
etirer le contenu egalement en largeur. Mais, afin de preserver ses proportions, nous devons 
l'etirer aussi dans le sens de la hauteur, hors champ (voir Figure 15.8). 



Figure 15.8 

Etirement 
du contenu 
a la verticale. 



Extension en largeur 
de la fenetre 




Extension en hauteur 
de I'image 



Inversement, lorsque la fenetre est etiree en hauteur, nous devons agrandir le contenu en 
hauteur et, indirectement, en largeur, hors champ (voir Figure 15.9). 

Figure 1 5.9 Extension en largeur 

Etirement , , de I'image 



du contenu a 
I'horizontal. 




Extension en hauteur 
de la fenetre 



II en resulte que I'image remplit la surface de la fenetre en toutes circonstances. 

Mais, nous ne pouvons a la fois dire que la largeur du contenu correspond a la largeur de la 
fenetre et que la hauteur de ce meme contenu equivaut egalement la hauteur de la fenetre. 
Car il suffit que la fenetre n'affiche pas les memes proportions que celles du contenu pour 
que les instructions entrent en conflit. Pour resoudre ce dilemme, nous devons specifier une 
action qui active l'un ou 1' autre des redimensionnements, en fonction de la plus grande 
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longueur observee. Si c'est la largeur qui est plus grande que la hauteur, alors, nous etirons 
T image en hauteur. Si, en revanche, c'est la hauteur de la fenetre qui est plus importante, 
alors, nous etirons 1' image dans sa largeur. Comme, dans les deux cas, 1' image conserve ses 
proportions, elle remplira toujours la surface de l'ecran. 

Nous precisons alors, dans notre fonction, la condition suivante : 

if (contenujnc . scaleX<=contenu_mc . scaleY) { 
contenujnc . scaleX=contenu_mc . scaleY; 
} else { 

contenujnc . scaleY=contenu_mc . scaleX; 

} 

Si l'echelle de redimensionnement du contenu en largeur (scaleX) est inferieure a son redi- 
mensionnement en hauteur (scaleY) (done, si la fenetre est plus haute que large), alors, 
l'echelle en largeur (scaleX) prend pour valeur l'echelle de la hauteur (scaleY) : 

if (contenujnc . scaleX<=contenu_mc . scaleY) { 
contenujnc . scaleX=contenujnc . scaleY; 

} 

Inversement, si c'est la largeur qui est plus grande que la hauteur, dans ce cas, nous appli- 
quons l'echelle de la hauteur (scaleY) sur l'echelle de la largeur (scaleX) : 

else { 

contenujnc . scaleY=contenujnc . scaleX; 

} 

Cette technique permet de redimensionner la fenetre dans des proportions libres, differentes 
de celles de la scene, et d'elargir quand meme le contenu, mais sans jamais y appliquer de 
distorsion. Seule une transformation homothetique est appliquee. 

Pour assurer une remise a l'echelle de qualite correcte, pensez egalement a appliquer, aux 
contenus, un lissage. Pour en savoir plus sur cette technique, reportez-vous au chapitre 
consacre aux API d'affichage et de nitres. Dans ce document, nous avons simplement applique 
un lissage depuis la fenetre Bibliotheque. 



Principe de flottement facon styles CSS. En declinant le principe de redimensionnement, ici 
evoque, et celui du repositionnement, developpe dans la section des menus deroulants, vous pouvez 
aussi concevoir une interface dans laquelle les objets flottent de maniere relative, les uns par rapport 
aux autres, et se redimensionnent selon la taille effective de la fenetre du navigateur, a la maniere 
d'une page HTML, par exemple. 



A retenir 

■ Pour placer et redimensionner des objets en fonction de la taille de la fenetre, nous utilisons les pro- 
prietes stageWidth et stageHeight de la scene. 

■ Afin d'appliquer une mise a l'echelle homothetique, nous ajoutons une condition qui determine le 
redimensionnement en fonction de la largeur la plus grande. Cette largeur est ensuite utilisee pour 
definir le coefficient de redimensionnement. 
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Gerer le PDF 

Une interface tout en Flash implique la necessite d'y importer differents types de medias, 
afin, tout simplement, de ne pas avoir a sortir de cet espace pour y acceder. Typiquement, 
cela pose probleme lorsqu'un lien, dans Flash, cible un document PDF. Dans ce contexte, le 
format PDF, qui requiert l'ouverture d'Acrobat, oblige l'utilisateur a sortir du site tout en 
Flash pour pouvoir lire un contenu. 

Dans cette section, bien que cela soit structurellement impossible, nous abordons les contour- 
nements qui permettent d'integrer malgre tout un document PDF dans Flash, afin de 
permettre a l'utilisateur de rester dans son univers developpe tout en Flash. 

■ Difference structurelle entre Flash et Acrobat. Flash compile des donnees a la publication du 
|| document. Acrobat, a I'inverse, ne gere qu'un amoncelement de scripts assembles dans un certain 
ordre, sans les compiler. Acrobat agit un peu a la maniere d'une page HTML qui gere des fonctions 
JavaScript et de medias zippes. La structure des documents etant tres differente, ('implementation du 
format non compile dans le format compile est peu concevable. L'inverse, en revanche, se fait facile- 
ment. Vous pouvez parfaitement placer un contenu SWF dans un document Acrobat. 

II n'est pas possible d'afficher dynamiquement un PDF dans l'interface de Flash. Mais, il 
est possible d' importer un PDF physiquement, dans la scene, avant publication. II est egale- 
ment possible de generer dynamiquement des fichiers au format PDF a partir d'un docu- 
ment Flash. Vous pouvez aussi appeler un fichier PDF a travers un hyperlien en utilisant la 
methode navigateToURL, abordee au Chapitre 14. Quelques services en ligne proposent 
aussi de vous fournir dans un format compatible Flash, un PDF recompile. 

Pour importer physiquement un PDF dans Flash, vous devez d'abord le convertir dans un 
autre format via InDesign ou Illustrator, par exemple, les formats compatibles avec Flash 
sont l'EPS, le format AI et le XFL. Naturellement, les formats d'images sont egalement 
compatibles, mais alourdissent considerablement le poids des contenus et la gestion des 
documents. 

1 . Depuis InDesign, faites Fichier > Exporter (Ctrl+E pour Windows ou Cmd+E pour 
Macintosh). 

2. Puis, dans la fenetre d' exportation, dans le menu Format, choisissez "Adobe Flash CS4 
prof (XFL)". Validez. 

3. En validant, une boite de reglage apparait (voir Figure 15.10). 

4. Specifiez un texte InDesign en texte Flash, afin de preserver l'edition du document. 
Puis, validez. 

5. Depuis Flash, faites ensuite Fichier > Ouvrir. 

6. Selectionnez le document XFL et confirmez l'importation. 

Le document est importe dans la scene et vous pouvez l'animer. Le precede est similaire 
avec Illustrator. 

Vous pouvez aussi convertir un PDF en livre a feuillets depuis InDesign. Reportez-vous 
egalement au Chapitre 9 pour en savoir plus a ce sujet. 
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Figure 15.10 

Scenario de la 
scene principale. 



Exporter au format Adobe Flash CS4 Professional (XFL) 

Taille (pixels) : @ Echelle : 100 % T) 

OAjuster a : 1 024 x 768 (plein ecran ) j 1 
Larqeur 596 i - Hauteur: 842 

Pages : @ Toutes 



O Etendue : 1-3 
M Planches 

^ Pixelliser les planches 
Aplatir la transparence 



Texte : 1 Texte InDesign en texte Flash 



3 



p Annuler ) £j 



Convertir un PDF en SWF avec FlashPaper. II est possible de generer un document Acrobat PDF 
en fichier Flash SWF a la volee. L'utilitaire FlashPaper, developpe par la societe Macromedia, et com- 
patible uniquement avec Windows, offre cette possibilite. Une version devaluation de ce programme 
est disponible a I adresse suivante . http://www.adobe.com/cfusion/tdrc/index.cfm7pro- 
duct=flashpaper. 



Creation dynamique de fichiers PDF. Pour generer dynamiquement un PDF nous pouvons uti- 
liser la classe byteArray. Reportez-vous au Chapitre 5 du livre de Thibault Imbert, editions Pearson, 
Pratique d'ActionScript 3, pour en savoir plus a ce sujet. 



A retenir 

■ II est possible d'importer un document PDF au sein d'une animation Flash. Pour cela, nous devons 
au prealable le convertir en dur depuis une application graphique ou dynamiquement. 



Gerer la typographic 

La gestion de la typographic, dans une page web, souleve toujours de nombreuses interro- 
gations. Usuellement, une page web depend des polices presentes sur le systeme de l'utili- 
sateur pour afficher un texte. Dans une page HTML, nous specifions alors la police a 
employer. Si celle-ci est absente de la configuration de l'utilisateur, c'est la police activee 
par defaut, par le navigateur, qui prend le relais (generalement Times). 

Dans Flash, c'est different. Flash propose trois modes de traitement pour le texte : les textes 
statiques, les textes dynamiques et les textes de saisie. Nous ne comptons pas les textes 
vectorises sous forme de graphisme ni les textes vehicules sous la forme d'images. 



I 



Vectoriser un texte dans Flash. Pour vectoriser un texte dans Flash, faites deux fois de suite 
Ctrl+B (Windows) ou Cmd+B (Mac). Cette commande casse I'enveloppe courante, qu'elle soit un bloc 
de texte ou un symbole. Pour le texte, la premiere action separe les lettres, la seconde les vectorise. 
Petit rappel mnemotechnique : pensez a B comme Break qui signifie casser en anglais. Une fois le 
texte vectorise, pensez egalement a le regrouper afin d'eviter tout risque de morcellement si vous 
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devez ensuite le manipuler. Pour le regrouper, faites Ctrl+G (Windows) ou Cmd+G (Mac). Attention, 
un texte vectorise n'est plus editable. Mais la forme graphique devient modifiable avec les outils de 
dessin (Plume, pot de peinture, outils de selection). 



hi 



Les textes statiques 

Les champs de textes statiques integrent la forme de contour vectorielle des caracteres, a la 
publication du document. Les caracteres sont done pris en charge nativement. 

Affichage des polices dans Flash. Attention, toutes les polices affichees correctement dans le 
document Flash ne sont pas necessairement integrees a la publication. Pour verifier qu'une police est 
integree, verifiez que I'option de menu Affichage > Mode Apercu > Texte anti-aliase, est bien cochee. 
Si une police s'avere non integrable, elle apparait alors avec un crenelage dans le document. Vous 
pouvez ainsi en choisir une autre depuis le menu Famille de caractere, de I'inspecteur de proprietes. 



Les documents Flash peuvent utiliser des polices Type 1 PostScript®, TrueType® et bitmap 
(uniquement sur Macintosh) de taille maximum de 255 points. Les textes sont Unicode 
depuis la version du lecteur Flash 7. 



Les textes dynamiques 

Les textes dynamiques et de saisie, en revanche, utilisent les polices de peripherique (_sans, 
_serif, ou typewriter). Ces polices sont disponibles en tete de liste dans la liste des polices 
de I'inspecteur de proprietes. La police _sans correspond a de l'Arial ou de l'Helvetica. La 
police _serif, a un Times. La police typewriter a un Courier. 

Si vous souhaitez ajouter une typographique specifique a un texte dynamique, cela reste 
possible. II suffit d'en ajouter les caracteres necessaires, sur chaque champ concerne, depuis 
I'inspecteur de proprietes. 

1. Pour ajouter une police a un champ de texte dynamique, selectionnez le champ de texte 
avec l'outil de selection (fleche noire). 

2. Dans I'inspecteur de proprietes, cliquez sur Integration de caracteres (voir Figure 15. 11). 

3. Une boite de dialogue s'ouvre. 

4. Dans la liste qui apparait, selectionnez uniquement les caracteres utiles pour optimiser 
autant que possible le poids du document (voir Figure 15.12). Au besoin, ajoutez 
manuellement les caracteres manquants, dans le champ Inclure ces caracteres. 

Lorsque vous ajoutez des caracteres manuellement, relevez que chaque caractere ajoute 
augmente d' autant le poids du fichier. Eviter, par consequent, de recourir a un nombre trop 
varie de polices de caractere dans un meme document. 

Lorsque vous saisissez les caracteres a ajouter, pensez a ajouter aussi l'espace, les sigles 
monetaires et les caracteres accentues ou speciaux. Les listes de caracteres par defaut etant 
concues initialement pour un public anglo-saxon, il convient d' ajouter ceux qui ne figurent 
pas dans cet alphabet, comme les caracteres e, e, c, a, 6, i, u, e, a, 6, i, u, e, a, l et espace. 
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Figure 1 5.1 1 

Inspecteur 
de proprieties. 



PROPRItltS I 



dynamique 



33 



POSITION ET TAILLE 

X: 2ftU0 V: M?7 ,PP 

|| W: 104,00 H: MM 

ST CARACTERE 

Famille : | Verdana |^| 
Style: | Regular |^| 
TOt: 12,Q pt Espacememd....2 J fl 
Couleur : U Crenage amomaiique 

Anti-alias : [ Anti-alias pour la lisibiliie i * ] 



V PAR A CRAP HE 

Format : Q 



Espacement jt| g,0 px fi 2.0 pt 
Marges ! *1 0 0 px I*- 0,0 px 



Comportement : | MuUiligne 
Orientation : fib » 



Variable : 
P F1LTRES 



Figure 15.12 

Integration 
de caracteres. 



Integration de caracteres 



Selectionnez les jeux de caracteres a integrer. Pour en 
selectionner plusieurs ou en deselectionner un, utilisez Cmd 
+clic. 



Tous {95911 glyphes) 
Majuscules [A..Z] (27 glyphes) 
Minuscules [a.. z] (27 glyphes) 
Chtffres [0..9] (11 glyphes) 
Ponctuation (!@#«...) (52 glyphes) 
Latin baslque (95 glyphes) 
Kanajaponais (318 glyphes) 
Kanji japonais - Niveau 1 (3174 glyphes) 
Japonais (tous) (7517 glyphes) 
Hangul de base careen (3454 glyphes) 
Hangul coreen (Tous) (11772 glyphes) 
Chinois traditionnel - Niveau 1 (5609 glyphes) 
Chinois traditionnel (Tous) (18439 glyphes) 

Inclure ces caracteres : 




e ecauoiuyeaoiu yeat J ( Remplissage automatique"^ ) 



Nombre total de glyphes : 130 



^ Ne pas integrer ^ 



f Annuler ^ ( OK ^ 



Dans la Figure 15.12, nous avons pris soin de ne selectionner que les listes de caracteres 
Minuscules, Majuscules, Chiffres et Ponctuations, puis de saisir, a la main, les caracteres 
speciaux manquants, directement dans le champ Inclure les caracteres. La liste "Tous" integre 



LE CAMPUS 



454 



ActionScript 3 ET motion design 



absolument tous les caracteres, vous augmenteriez considerablement le temps de publica- 
tion et le poids de votre document, en la selectionnant. II est en outre preferable de restrein- 
dre le choix aux caracteres utiles uniquement et d'y ajouter, si necessaire, les caracteres 
manquants, dans le champ Inclure les caracteres, prevu a cet effet. 

Attention, l'option Remplissage automatique n'enregistre que les caracteres affiches dans le 
champ actif. 

Les polices et les masques. Si vous utilisez des champs de textes dynamiques ou de saisie, avec 
des masques, verifiez toujours la saisie ou I'affichage sur des postes utilisateurs differents. Selon la 
configuration du systeme, certains caracteres peuvent ne pas apparaitre. Dans ce cas, pensez deja a 
ajouter les caracteres manquants. Notez que le parametre wmode utilise pour un affichage transpa- 
rent du document Flash (vu precedemment) peut aussi neutraliser certains caracteres a la saisie (aro- 
base), si un masque est utilise, avec d'anciennes versions du lecteur Flash. Dans ce cas, evitez 
d'utiliser conjointement les masques et les champs de textes dynamiques. 



Les bibliotheques partagees de symboles et de typographies 

Le principe de la bibliotheque partagee est de centraliser, sous la forme d'un fichier SWF ou 
SWC, un ou plusieurs objets de la bibliotheque d'un document Flash. Cette technique per- 
met d'optimiser la gestion d'objets recurrents sans avoir a les stocker a l'interieur de chaque 
document SWF qui doit les utiliser. Sachant combien le poids d'une typographic peut etre 
compromettant dans l'elaboration d'un site web, et combien son utilisation affecte, pour- 
tant, les identites graphiques, rassembler une typographic dans une bibliotheque partagee 
peut nous affranchir de quelques contraintes. 

Exemples > ch 1 5_siteFullFlash_3.fla 
Exemples > ch 1 5_siteFullFlash_3b.fla 

Dans cette section, nous presentons comment exporter une police a partir d'un document 
Flash et l'integrer dynamiquement a tout autre document SWF. Les deux fichiers d'exemple 
"chl5_siteFullFlash_3.fla" et "chl5_siteFullFlash_3b.fla" reprennent cette procedure. 

Pour partager une typographic, dans le menu contextuel de la fenetre de bibliotheque d'un 
document Flash, choisissez Nouvelle police. Une fenetre de dialogue apparait (voir Figu- 
res 15.13 a 15.15). 

1 . Dans le champ Nom, inscrivez le nom que vous souhaitez attribuer a votre police parta- 
gee. 

2. Dans le menu Police, selectionnez la typographic de votre choix. Ajoutez eventuelle- 
ment quelques options comme l'italique, le gras, si ces proprietes sont disponibles par 
exemple. 

3. Dans la partie centrale, activez l'option Exporter pour ActionScript si vous souhaitez 
pouvoir disposer de la typographic en programmation pour des objets TextField. Et 
attribuez dans ce cas un nom de classe a la police. 
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Figure 15.13 

Ajout d'une 
police partagee a 
la bibliotheque. 



Proprietes des symboles de police 



Nom : ||naPolice 



Police : AvantCarde CE 
Style: Regular 

fj Faux gras ^ Texte bitmap 
12 Faux italique Taille : 



]B ( Annuler ) 



Options de base ") 



M Exporter pour ActionScript 
M Exporter dans I'image 1 



Classe : maPolice 



Classe de base : flash. text.Font 



Partage 



EH 
00 



M Exporter pour le partage a i'execution 

H Importer pour le partage a I'execution 
URL : chl5_siteFullFlash_3.swf 



4. Dans la partie inferieure, activez l'option Exporter pour le partage a I'execution. 
Dans le champ URL, maintenant actif, inscrivez le nom de publication du nchier 
SWF de ce document Flash. Puis validez. La fenetre de bibliotheque affiche la nou- 
velle police. La colonne Liaison indique que Fobjet est pret pour Fexportation (voir 
Figure 15.14). 



Figure 15.14 

Affichage de la 
police partagee 
dans la biblio- 
theque. 



KltiLIOIHtQUt 



3 



| ch9_3DNative_3.fla 



P 



a. | Liaison 



I Nombre d'utilisations 



/± maPolice 



Exporter: maPolice 



5. Procedez de meme pour des symboles, en creant par exemple un movieClip. Puis, dans 
la fenetre de bibliotheque, affichez les proprietes contextuelles du movieClip en faisant 
un clic-droit > Propriete, sur le symbole. La fenetre de proprietes du symbole apparait 
(voir Figure 15.15). 

6. Activez les options d' exportation et validez. 
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Figure 15.15 

Ajout d'un sym- 
bole partage a la 
bibliotheque. 



Nom : |monSymbole 



- r ok > 



Type : I Clip 



f Annuler 



( Modifier ") ( Options de base ) 



'_ Activer les reperes d'echelle a 9 decoupes 

Liaison 



@ Exporter pour ActionScript 
M Exporter dans I'image 1 



Classe : monSymbole 



Classe de base : flash. display. MovieClip 
Partage 



00 
00 



M Exporter pour le partage a I'execution 

Z Importer pour le partage a I'execution 

URL: chl5_siteFullFlash_3.swf 

Source 

( Parcourir... ""l Fichier : 

( Symbole... ) Nom du symbole : Symbole 1 

d 1 Toujours mettre a jour avant la publication 



La fenetre de bibliotheque affiche egalement le MovieClip et son statut d'objet pour 
l'exportation (voir Figure 15.16). 



Figure 15.16 

Affichage du sym- 
bole partage dans 
la bibliotheque. 
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2 elements |P 


Nom 


^ | Liaison 




I Nombre d'utilisations 


maPolice 


Exporter: maPolice 


0 


f£l monSymbole 


Exporter: monSymbole 


0 










► 





7. Sans necessairement utiliser les objets dans la scene de ce document, publiez-le au format 
SWF en faisant Ctrl+Entree (Windows) ou Cmd+Entree (Macintosh). 

8. Puis, dans un nouveau document Flash que vous aurez prealablement enregistre, impor- 
tez les elements partages par glisser-depose de la bibliotheque du document exportateur 
vers la scene du document importateur (voir Figure 15.17). 

9. Pour acceder a la bibliotheque d'un autre document, depuis le sommet de la fenetre de 
bibliotheque du document actif, selectionnez dans la liste deroulante, le nom du document 
contenant les objets a importer. 
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Importation dyna- 
mique des objets 
partages dans un 
autre document.. 
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3 elements |p 
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[4] filet 
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► 



La fenetre de bibliotheque du nouveau document affiche le statut des objets importes 
une fois ceux-ci ajoutes (voir Figure 15.18). 



Figure 15.18 

Affichage des 
objets importes 
dans la bibliothe- 
que du nouveau 
document. 
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1 ► 





10. Dans la scene du nouveau document, placez une occurrence du MovieClip importe et 
ajoutez un champ de texte en y inscrivant quelques mots. Pour appliquer la police 
importee au champ de texte, depuis l'inspecteur de proprietes du texte, dans le menu 
Famille de caractere, selectionnez le nom que vous avez attribue a votre police, desor- 
mais disponible. Le champ de texte affiche la police selectionnee. Dans le document 
"chl5_siteFullFlash_3b.fla", nous utilisons les objets partages du document 
"chl5_siteFullFlash_3.fla" (voir Figure 15.19). Publiez le nouveau document au format 
SWF. 

11. Puis, revenez dans le document initial pour modifier la forme interieure du MovieClip 
original et la police. Pour la modifier, depuis les proprietes de la police, disponibles a 
partir de la fenetre de bibliotheque, selectionnez une autre famille de caracteres et validez 
votre modification. Publiez a nouveau ce document. 



LE CAMPUS 



ActionScript 3 ET motion design 




Figure 15.19 

Utilisation 
des objets 
partages dans 
le document.. 



12. Sans republier le nouveau fichier Flash qui importe les objets partages, executez direc- 
tement son format deja publie en SWF. Les objets sont instantanement mis a jour.. 

■ Le nouveau moteur de texte Text Layout Framework. Adobe prevoit I'implementation d'un 
g nouveau moteur de gestion de texte pour les versions a venir de Flash. II permet de gerer le flotte- 
ment du texte sur plusieurs colonnes, dynamiquement, la chasse, I'interlignage, la selection, comme 
dans un veritable logiciel de mise en pages. Ce moteur est actuellement disponible en version beta. 
Vous pouvez le tester a I'adresse suivante : http://labs.adobe.com/technologies/textlayout/. 



A retenir 

■ II est possible de partager des symboles et des polices de caractere pour plusieurs documents Flash, 
simultanement. Pour cela, nous activons I'option Exporter pour le partage a I'execution, depuis les 
proprietes des objets disponibles a partir de la bibliotheque et importons cette bibliotheque dans 
d'autres documents Flash. 



Importer Flash AS1/AS2 dans Flash AS3 

Les documents codes en AS1 ou AS2 utilisent le meme moteur (AVM1). Le langage 
ActionScript 3 est, lui, structurellement different des precedentes versions et utilise un nou- 
veau moteur (AVM2). Les documents Flash bases sur AS3 disposent done d'une architec- 
ture differente des anciens documents Flash. Si nous pouvons facilement importer des 
contenus AS1 ou AS2 animes dans un document AS3, a partir d'un simple chargeur, nous ne 
pouvons pas, en revanche, y apporter de l'interactivite. Pour cela, nous devons ouvrir une 
connexion entre les deux formats de fichier, par nature dissocies, a l'aide de la classe 
LocalConnexion. 
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Pour comprendre comment utiliser cette classe, nous devons admettre que le fichier AS1/ 
AS2 d'une part et AS3 d'autre part, sont hermetiques l'un envers l'autre, et que seul un 
objet localConnexion permet d'ouvrir une porte de chaque cote des deux animations pour 
transmettre des requetes d'AS3 vers AS2. 

II devient alors facile d'invoquer une fonction AS2, depuis une instruction placee dans un 
document AS3, par simple identification du nom de la connexion et de la fonction, definies 
dans le document AS2. 

Le fichier AS3 emetteur est appele fichier d' envoi. II contient la methode a appeler. Le 
fichier d'envoi doit contenir un objet LocalConnection et un appel de la methode send ( ) . 
L'autre fichier, le fichier AS1 ou AS2, est dit de reception. II s'agit de celui qui appelle la 
methode. Le fichier de reception doit contenir un autre objet LocalConnection et un appel 
de la methode connect ( ). 

Dans cette section, nous presentons un document AS3 qui contient un bouton. Ce bouton 
affecte les proprietes d'un symbole de type MovieClip, contenu dans un fichier AS2 
importe. 




Exemples > chl 5_siteFullFlash_4_AS3.fla 
Exemples > chl 5_siteFullFlash_4b_AS2.fla 



Le document "chl5_siteFullFlash_4_AS3.fla" affiche une scene exportee pour Flash 10 et 
ActionScript 3.0. Sur cette scene figure un bouton nomme connexion_btn (voir 
Figure 15.20). 



Figure 15.20 

Apercu du 
document AS3. 
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Le fichier "chl5_siteFullFlash_4b_AS2.fla", affiche quant a lui une scene exportee pour 
ActionScript 2.0 et le lecteur Flash 8. Sur cette scene, figure un MovieClip nomme 
symbolejnc (voir Figure 15.21). 



Figure 15.21 

Apercu du 
document AS2. 



importation 

Flash AS2 



J 



En publiant le document AS3, le fichier AS2 est d'abord importe en premier plan. En cli- 
quant sur le bouton connexion_btn, du document AS3, le symbole du fichier AS2 subit une 
rotation de 20° (voir Figure 15.22). 

Figure 15.22 r 

Interaction AS3 
versAS2. 



importation 

Flash AS2 



Dans la fenetre Actions du document AS2 ("chl5_siteFullFlash_4b_AS2.fla"), nous pouvons 
lire le code suivant : 

// recepteur 

var recepteur : LocalConnection = new LocalConnection( ) ; 
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// active la connexion 

recepteur . connect ( "maConnexionAS2" ) ; 

// definition de la fonction AS2 activee depuis le document AS3 
recepteur . monActionProgrammeeAS2=f unction () { 

// actions AS2 

symbolejnc ._rotation+=20; 

} 

Dans le code du document AS3 ("chl5_siteFullFlash_4_AS3.fla"), nous lisons le pro- 
gramme suivant : 

// chargeur 

var chargeur: Loader = new Loader(); 

var chemin:URLRequest=new URLRequest( "ch15_siteFullFlash_4b_AS2.swf " ) ; 
chargeur. load(chemin) ; 
addChild(chargeur) ; 

// connexion avec SWF AS2 

var emetteur: LocalConnection = new LocalConnection ( ) ; 

connexion_btn . addEvent Listener (MouseEvent . CLICK, AccesAS2) ; 

function AccesAS2(evt:MouseEvent ) { 

// nom de la connexion definie dans AS2, nom de la fonction definie dans AS2 
emetteur . send ( "maConnexionAS2" , "monActionProgrammeeAS2" ) ; 

} 

Dans le premier document (AS2), nous commencons par ouvrir une connexion avec un 
objet LocalConnexion : 

// recepteur 

var recepteur : LocalConnection = new LocalConnection( ) ; 

A la suite, nous activons cette connexion, a l'aide de la methode connect ( ) . En parametre, 
nous specirions le nom de cette connexion invoquee plus tard dans le richier AS 3. 

// active la connexion 

recepteur . connect ( "maConnexionAS2" ) ; 

Puis, sur cet objet, nous definissons une fonction dont le nom (monActionProgrammeeAS2) 
sera egalement invoque plus tard dans le document AS 3. 

// definition de la fonction AS2 activee depuis le document AS3 
recepteur. monActionProgrammeeAS2=f unction () { 

// actions AS2 

symbolejnc ._rotation+=20; 

} 

Pour terminer, l'instruction applique une rotation de 20° sur le clip symbole_mc place sur la 
scene principale (symbolejnc ._rotation+=20). 

Dans le document AS3 appelant, dans la fenetre des actions, nous commencons par charger 
le richier SWF code en AS2. Puis, plus loin, nous ouvrons egalement une connexion en defi- 
nissant un nouvel objet LocalConnexion : 

// connexion avec SWF AS2 

var emetteur: LocalConnection = new LocalConnection () ; 
connexion jDtn . addEvent Listener (MouseEvent . CLICK, AccesAS2) ; 
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function AccesAS2(evt:MouseEvent ) { 

// nom de la connexion definie dans AS2, nom de la fonction definie dans AS2 
emetteur . send ( "maConnexionAS2" , "monActionProgrammeeAS2" ) ; 

} 

A l'interieur de la fonction appelee par le gestionnaire d'evenement en AS3, nous asso- 
cions, a l'objet emetteur, la methode send ( ) . Cette methode envoie une requete qui invoque 
le nom de la connexion (maConnexionAS2) et la fonction (monActionProgrammeeAS2), 
prealablement definies dans le fichier AS2. 

En publiant le document, et en cliquant sur le bouton du document AS3, la liaison entre les 
deux fichiers est etablie. 



I 



II est possible d'appeler un document heberge sur un autre serveur et d'un autre domaine que celui 
ou figure le fichier appelant. Vous devez, pour le document appele, ajouter I'instruction qui autorise 
le lecteur a communiquer avec un autre domaine. Pour cela, entre la definition de l'objet Local- 
Connexion et I'activation de la connexion, ajoutez une des deux instructions suivantes. 

Si le fichier AS3 est sur un domaine different mais identifie, inscrivez : 

recepteur . allowDomain( "http: / /www. nomdu site. com" ) ; 
Ou bien, si le document AS3 est sur un domaine different mais inconnu, inscrivez : 

// recepteur. allowDomain( "*") ; 



A retenir 

■ Les documents AS1/AS2 peuvent etre importes dans un document AS3 a I'aide d'un simple chargeur, 
mais aucune interaction n'est possible avec le document importe. 

■ Pour autoriser interaction du document AS1/AS2 charge, nous devons etablir une connexion a 
I'aide d'un objet LocalConnexion. Le document AS3 peut alors invoquer des fonctions developpees 
dans le fichier AS 1 /AS2, d'une ancienne version de langage. 



Synthese 

Dans ce chapitre, vous avez appris a redistribuer les contenus a l'ecran, en fonction des 
dimensions d'une fenetre, et a projeter ces contenus dans un affichage de type Plein ecran, 
tout en permettant a l'utilisateur de restaurer l'affichage initial pour la realisation d'un site 
full Flash. Vous avez egalement appris a gerer l'affichage de la typographic, a l'integrer si 
necessaire et a la partager, ainsi que des symboles, avec d'autres documents. Vous savez 
aussi comment importer physiquement un document PDF pour la publication et eviter de 
sortir d'un univers tout en Flash. Vous avez enfin appris a interagir depuis un document 
AS3, avec un contenu developpe en ActionScript 1 ou 2. Vous etes a present en mesure de 
realiser des systemes d' affichage sophistiques et optimises, qui valorisent les contenus en 
Flash, au-dela de la surface d' affichage astreinte aux dimensions utiles d'une fenetre de 
navigateur, toutes versions de Flash confondues. 
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Introduction 

Flash a pendant longtemps ete repute pour offrir un contenu totalement opaque pour les 
moteurs de recherche. Mais, voici la chose revolue. Google et Adobe collaborent maintenant 
pour favoriser la reconnaissance des contenus edites au format Flash. 

Depuis le prin temps 2008, tout contenu Flash structure selon les recommandations de Google 
est officiellement enregistre et presente de la meme maniere que tout autre contenu HTML, 
aussi stricte en soit la mise en forme. Nous detaillons, dans ce chapitre, les recommanda- 
tions emises par Google pour favoriser l'indexation d'un contenu realise en Flash. 

Nous abordons aussi d'autres aspects comme : le pageRanking qui revele la pertinence d'un 
site en fonction de sa popularite autant que par son contenu ; les metadonnees XMP ajoutee 
de maniere intrinseque aux contenus Flash ; 1' integration XHTML stricte plus favorable a la 
lisibilite d'un contenu Flash ; et l'affichage de contenu HTML alternatif pour les utilisateurs 
qui ne disposent pas du lecteur Flash. 

A Tissue de cette annexe, vous saurez rendre vos realisations parfaitement visibles pour les 
moteurs de recherche. Vous saurez meme comment vous positionner mieux que des contenus 
realises en HTML simple. 

Integration XHTML stricte 

Les annuaires sont sensibles a l'accessibilite des contenus. La maniere d'integrer les 
fichiers Flash favorise done le positionnement du site. 

Lors de l'integration d'un fichier SWF dans une page HTML, Flash et Dreamweaver utili- 
sent les balises <embed> et <ob j ect>. La balise <embed> ne fait pas partie des specifications 
des normes strictes d' integration XHTML. Pour integrer le Flash proprement, il est preferable 
d' employer uniquement la balise <ob j ect>. 

Le code de base employe pour une integration stricte du Flash est : 

<object ty pe="applicat ion /x- Shockwave- flash" data="monDocument Flash . swf " 

width="800" height="600"> 
<param name="movie" value="monDocumentFlash . swf " /> 
<p>Texte secondaire alternatif </p> 
</object> 

II est a preciser que la balise <ob j ect>, employee seule, active aussi un blocage dans Inter- 
net Explorer qui demande a l'utilisateur de confirmer l'activation du contenu en Flash avant 
de poursuivre sa lecture (comme controle Active -X). D'autres solutions d'integration plus 
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souples sont disponibles pour Flash. Nous les abordons en fin d' annexe, avec 1' utilisation du 
kit SWFObject2. 

A retenir 

■ ^integration stricte de Flash avec la balise <object> favorise indirectement son indexation aupres 
des moteurs de recherche. 

■ L'utilisation de la balise <obj ect> implique un blocage dans Internet Explorer. 

■ D'autres solutions d'integration sont disponibles avec SWFObject2. 

Structurer un document pour I'API de Google 

Depuis juin 2008, Google reference officiellement le Flash (lire http://googlewebmaster- 
central.blogspot.com/2008/06/improved-flash-indexing.html). Les resultats des pages de 
recherche demontrent que le contenu vehicule dans un document Flash est desormais bien 
pris en compte (voir Figure 16.1). 

Indexation d'une animation SWF avant la nouvelle API de Google 
Deep Impact 

www jpl mm ocw/multimedia/deep-impacirinorjx -flash html - 3k - C-ichtx: - Similar pay<?s 



Indexation d'une animation SWF depuis la nouvelle API de Google 
Deep Impact 

NASA's Hubwo, SpiUer and Chandra Space Telescopes will be recording these ... ORBIT 
PATHS This animation shows the t r aje c tory of Deep Impact and the orbit ... 

www jpl nasa gov/multimecia/deep impacfirdex -flash html . 3k ■ Cached * Similar arm— | 

Pour que les documents Flash puissent etre correctement indexes, ils doivent obeir aux 
specifications suivantes : 

• Tous les textes contenus dans un document SWF sont enregistres, des lors qu'ils sont 
visibles a l'ecran et edites dans un champ de texte statique, dynamique ou de saisie. Les 
textes places dans des symboles, dans des boutons sont egalement pris en compte. Seuls 
les textes images ou vectorises ne sont pas identifies. 

• Les URL affichees dans le texte, si elles sont cliquables, sont egalement enregistrees. 
Elles peuvent etre actives a partir des fonctionnalites de lien definies depuis l'lnspecteur 
de proprietes, ou en ActionScript, toutes versions du langage confondues. 

• Les fichiers SWF, XML, HTML et textes externes, lies a un contenu Flash identifiable 
(un texte) sont egalement enregistres. Important, Google fait meme ressortir la page 
HTML qui contient le Flash. Done, non seulement Flash n'est pas opaque pour les 
moteurs, mais l'utilisation de la technologie Flash favorise l'indexation d'une page 
HTML. 

• Les images, les videos et les graphismes vectoriels ne sont pas, en revanche, enregistres. 



Figure 16.1 

Comparaison 
des resultats 
de recherche 
Google, avant et 
apres 2008. 
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• Si les contenus image et formes graphiques ne sont pas identifiables par Google, utilisez 
ces formats pour vehiculer des informations au demeurant inutiles, comme le 
texte "chargement en cours", par exemple. 

• Les documents Flash integres via une instruction JavaScript ne sont pas references. 
JavaScript apparait comme un mur anti-referencement. Preferez une integration stride 
avec la balise <object> (voir section precedente). Mais cela provoque un blocage 
d'Internet Explorer. Optez plutot pour une indexation qui se base sur un contenu alter- 
natif (voir fin d' annexe). 

• Flash distingue les pages HTML, les textes TXT et les fichiers XML appeles par le 
SWF du fichier SWF lui-meme. Ces contenus risquent done d'etre presentes en acces 
parallele aux animations Flash. Veillez a designer clairement leur libelle pour eviter les 
confusions et orienter autant que possible les utilisateurs. 

• Les textes bidirectionnels ne sont pas encore indexes, mais Google y travaille (Hebreu, 
Arabe). 

• Ne cachez pas d' informations sans rapport avec les noms et les descriptions affectes aux 
objets (technique du spamdexing ou spam). Le fonctionnement de Google favorise tou- 
jours l'indexation des sites qui servent l'utilisateur. Tout comportement mal veillant 
nuisible pour l'utilisateur est done egalement nuisible pour votre positionnement. 

• Une organisation semantique de la structure du site (noms des fichiers, noms des dos- 
siers) est primordiale. Aussi, attribuez des noms de fichiers et de dossiers en rapport 
avec le theme aborde, naturellement, sans caracteres speciaux, ni espaces. Les tirets 
sont considered par Google comme des separateurs semantiques, mais ils ne sont pas 
toujours bien supported par 1' API de Flash dans le cas de documents SWF imbriques. 

• Vous pouvez egalement ajouter des metadonnees aux fichiers SWF afin d'orienter le 
robot. Pour en savoir plus sur cette technique, reportez-vous a la section suivante. 

• Utilisez une mise en page XHTML claire pour le robot, qui lui permettra de distinguer 
semantiquement le positionnement du contenu en Flash des autres contenus. Pour cela, 
utilisez des balises div dont les identifiants se rapportent aux donnees vehiculees (Par 
exemple, utilisez un conteneur HTML <div id="f lash">...</div> pour contenir le 
Flash et <embed id="animation" ... /> pour afficher 1' animation Flash). 

• Pensez a toujours associer un contenu alternatif complementaire au format HTML. Cela 
peut etre une note d'intention du site, un resume, une version mobile, un document 
PDF. Tout texte qui accompagne le Flash aide a positionner le ou les fichiers presentes. 

• Vous pouvez egalement elaguer les elements inutiles qui ne doivent pas etre pris en 
compte lors de l'indexation. Filtrez pour cela les contenus utiles en utilisant un fichier 
"robot.txt" (consultez l'adresse http://www.google.com/support/webmasters/bin/ 
answer.py?hl=fr&answer=156449 pour en savoir plus sur l'utilisation du fichier 
robot.txt). 

• N'hesitez pas a consulter : http://www.google.com/support/webmasters/bin/ 
answer.py?hl=fr&answer=72746 pour en savoir plus. 
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Pour evaluer au mieux la maniere dont votre projet peut etre interprete par Google, pensez 
que Google favorise toujours les contenus au service de l'utilisateur. Si vous apportez des 
contenus utiles, bien organises, faciles d'acces, ils seront mis en avant, meme en Flash. Si 
vous tentez de manipuler l'utilisateur, d'agir a son insu, de forcer certains contenus, de 
cacher des textes en les mettant blanc sur fond blanc, cela penalisera votre positionnement. 
Google se met toujours a la place de l'utilisateur pour verifier un contenu en agissant dans 
l'interet de l'utilisateur. En respectant cette logique, vous ameliorez sensiblement le posi- 
tionnement de vos realisations. 

Le pageRanlring. Le pageRanking designe la popularity d'un site et principalement, la qualite des 
liens exterieurs qui y font reference. Cette donnee represents 50% des criteres qui aident Google a 
determiner le positionnement d'un site dans ses pages de resultat. II en resulte que, meme un site 
entierement opaque et pour lequel aucun effort d'optimisation n'est deploye, parvient tres bien a 
apparaitre en tete du placement pour une requete ciblee. Un site 1 00 % HTML strict ne garantie done 
pas, a lui seul, un positionnement meilleur qu'un site tout en Flash, meme opaque. Neanmoins, nous 
ne saurons que vous conseiller de favoriser I'accessibilite de votre projet et son optimisation, afin de 
repondre au mieux aux differents besoins des utilisateurs. 

Une excellente illustration de I'effet du pageRanking est cette anecdote apparue pendant les elec- 
tions presidentielles de 2007, en France. Une equipe de webmasters avait place au sein de nombreux 
blogs et forums de discussion, des hyperliens qui pointaient vers une biographie du personnage Izno- 
goud, personnage, 6 combien repute pour son gout prononce du pouvoir. Ironie de I'histoire, en 
associant au libelle de ce lien, I'expression "Nicolas Sarkozy President", ces webmasters ont prouve la 
toute puissance de Google. Quelques semaines plus tard, il suffisait en effet de saisir "Nicolas Sarkozy 
President" dans le moteur de Google, pour que la premiere page proposee soit la fiche biographique 
du personnage Iznogoud. Le mecanisme ayant opere, ils n'avaient pas tarde a proposer I'inverse : un 
lien de libelle Iznogoud qui pointait vers la page de candidature officielle du candidat Nicolas Sarkozy. 
Sans evidemment porter de jugement sur le fond de cette forme de blague contemporaine, le resul- 
tat obtenu a prouve combien le mecanisme de Google prenait davantage en consideration, le libelle 
et I'emplacement des liens sur I'lnternet, que les contenus qui y sont associes, eux-memes. Cest la rai- 
son pour laquelle nous pouvons affirmer aujourd'hui qu'un site realise integralement en Flash, pour 
lequel une campagne virale bien etudiee a ete deployee, peut obtenir un positionnement bien supe- 
rieur au referencement naturel obtenu par un site XHTML strict (voir Figure 16.1). 

Le debat Flash vs. XHTML. Flash ne se positionne pas comme une technologie concurrente a la 
creation de sites XHTML stricts. Ces techniques sont parfaitement complementaires, au contraire. 
L'une apporte I'accessibilite (HTML), I'autre la richesse et les fonctionnalites (Flash). A titre d'exemple, 
une entreprise pourra realiser un site 1 00 % XHTML pour offrir un service generique et institutionnel 
perenne qui vehiculera son image "corporate", une forme de "service public" en somme. Elle peut 
I'accompagner, plus ponctuellement et regulierement, sur des periodes plus courtes, avec des mini 
sites evenementiels tout en Flash. Cela lui permet, tout en apportant un service de base, elementaire, 
de valoriser et mieux communiquer aussi sur ses produits en proposant des fonctionnalites rich- 
medias irrealisables en XHTML. Les deux conceptions se completent done parfaitement. II n'y a pas de 
camp tout designe qui puisse se venter d'offrir une solution meilleure qu'une autre. Chaque techno- 
logie apporte une valeur ajoutee utile et complementaire l'une de I'autre. 
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A retenir 

■ Google sait enregistrer les textes contenus dans un document SWF 

■ Les fichiers qui accompagnent un document Flash, importes dans le SWF ou environnants (page 
HTML qui le contient) sont valorises. 

■ L'integration du Flash avec JavaScript favorise le blocage avec Internet Explorer. Cette solution 
permet, cela dit, de positionner le Flash a I'aide d'un contenu alternatif. 



Les metadonnees des fichiers SWF 

Les metadonnees des pages HTML sont des facteurs importants pour le referencement, 
meme si ces derniers sont de moins en moins pris en consideration, a la faveur des contenus 
eux-memes. Lorsque les metadonnees accompagnent les contenus, en integrant des textes et 
des mots qui soulignent le sens reel des informations affichees a l'ecran, elles valorisent le 
positionnement des pages. 

Lajout de metadonnees est desormais possible pour les documents SWF, comme nous le 
faisons pour les documents HTML. Depuis Flash CS4, il suffit de renseigner un tableau de 
descriptions code au format XMP, puis, de publier le document, pour que les informations 
soient automatiquement integrees a 1' animation. Des que le robot identifie le fichier SWF, il 
analyse ces metadonnees et affine le positionnement du document. 

1. Pour ajouter des metadonnees a un document Flash, dans Flash, faites Fichier > Infor- 
mations. 

2. La table des metadonnees s'affiche (voir Figure 16.2). 



chl6_refetencememFlash_l.fla 



I PTC Dp n nee 



Fonclion de I'auteur 
Description : 



Animation d'un papillon en couleL 



Not.: ***** 



it etre separees par unc vlrgule 01 



Etat du copyright ; [ Inconnu 
Notice de copyright : 



Date de creation : 09/09/2009 - 19:38 
Date de modification : 28/11/2009 - 14:01 



. Adobe Flash C54 Professional 
: applicatlcn/yndjdobe.fla 



xmp- 



Importer.. • Annulei 



Figure 16.2 

Apercu de la fenetre Informations. 
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3. Dans cette fenetre, differents onglets sont disponibles : 

- L'onglet Description permet de renseigner le profil general de l'auteur et d'informer 
les robots sur les caracteristiques generates du document. 

- L'onglet IPTC organise plus en detail les informations relatives a la signature du 
document, selon la norme conventionnelle internationale employee dans le secteur 
de la presse. 

- Les autres onglets permettent d'ajouter des informations en rapport avec d'autres 
systemes d'indexation et d'autres formats de fichiers. 

- A l'exception de l'onglet SWF mobile, reserve pour la publication des documents 
Flash a destination des appareils mobiles, nous n'en aurons pas usage pour la creation 
de sites web. 

4. Renseignez les champs requis dans les differents onglets. Puis validez. 

5. Publier le SWF en faisant Ctrl+Entree (Windows) ou Cmd+Entree (Mac). 

Le fichier SWF contient ses propres metadonnees. Si vous disposez de la Creative Suite 
Adobe, vous pouvez lire ces donnees depuis Bridge. Naviguez alors jusqu'au fichier SWF 
pour lire les metadonnees (voir Figure 16.3). 



Figure 16.3 

Affichage des 
metadonnees 
dans Bridge. 
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II est possible de generer des metadonnees via ActionScript a I'aide de la methode setMetadata( ) . 
Une documentation en ligne presente les commandes disponibles a I'adresse suivante : http:// 
help.adobe.com/fr_FR/Flash/10.0_ExtendingFlash/ 
WS5b3ccc5 1 6d4fbf35 1 e63e3d1 1 8a9024f3f-7dcf.html. 
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A retenir 

■ Pour ajouter des metadonnees dans un fichier SWF, nous utilisons la fenetre d'information du docu- 
ment Flash. 

■ Ces metadonnees sont lisibles par Google, mais aussi - et entre autres - depuis Bridge. 

Gerer le contenu alternatif pour les robots et les appareils 
nomades 

Les elements XHTML (<div></div> ou <embed />) ne sont pas pris en compte par les 
moteurs lorsqu'ils sont affiches a partir d'une commande JavaScript. Pour rendre un contenu 
visible, il est done preferable d'organiser son affichage directement a partir de ces balises 
XHTML sans les envelopper de comportements JavaScript (voir aussi http://fr.wikipe- 
dia.org/wikiAVeb_profond). Mais, bien que le contenu affiche par une instruction JavaScript 
neutralise l'acces au document Flash, il offre un certain avantage. 

A defaut de vouloir rendre le document Flash indexable pour 1' API de Google, vous pouvez 
aussi afficher un contenu texte XHTML, alternatif au Flash. Dans ce contexte, e'est juste - 
ment le contenu HTML alternatif qui va aiguiller le robot.Cette technique offre aussi un 
deuxieme avantage. Nous pouvons afficher un contenu alternatif au Flash a destination des 
appareils nomades non equipes du lecteur. Cela permet, par exemple, de proposer un service 
differencie et davantage cible pour les utilisateurs d'appareils nomades. Certains appareils 
continuent, en effet, de ne pas pouvoir lire le Flash. Cette section apporte les solutions alter- 
natives pour ces utilisateurs. 

Les contenus alternatifs intelligent;. Par le passe, nous developpions un clone du site Flash, en 
guise de contenu alternatif. Une aberration qui a ete repensee avec I'arrivee des appareils mobiles et 
la vague du Web 2.0. Lorsque vous utilisez un support different d'un ordinateur classique (telephone 
mobile), vous attendez un contenu approprie et qui reponde au mieux a votre besoin au moment ou 
vous consultez. II parait done plus coherent de cibler effectivement I'affichage des contenus en fonc- 
tion de la plateforme qui I'execute et non plus de le doubler de maniere parfaitement sterile. Si le site 
doit etre consulte sur un ordinateur, il peut offrir une navigation riche, de nombreuses fonctionnalites 
parfois gourmandes en ressources, sans trap de difficulte. Mais si le site doit pouvoir etre visite rapide- 
ment, entre deux rendez-vous, avec une connexion payante a la minute, sur un ecran de taille 
reduite et sur un appareil aux capacites limitees, en plein soleil, vous ne pouvez evidemment pas 
imposer le meme service que sur le site de base. Pensez a utiliser la technique JavaScript qui distingue 
le contenu Flash d'un contenu HTML pour permettre egalement d'offrir un contenu mobile approprie, 
different du site referent developpe en Flash. 

Installer le kit SWFObject2 

Pour realiser une page HTML conforme, qui ne provoque pas le blocage d'Internet Explo- 
rer, et qui permette de specifier a partir de quelle version du lecteur Flash, nous preferons 
afficher un contenu alternatif, tout en offrant un contenu identifiable pour Google, nous 
utilisons le kit de developpement SWF Object!. 
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Pour utiliser ce kit facilement, nous telechargeons le script SWFObject et son installeur. Le 
script est a placer dans le repertoire du site. L installeur est une page HTML/JavaScript qui 
genere, a la volee, le code HTML requis pour une integration conforme de l'animation 
Flash. Ce kit est disponible gratuitement a l'adresse suivante : http://code.google.eom/p/ 
swfobject/. Telechargez les fichiers "SWFObject2_2.zip" (le script) et le fichier 
"SWFGenerator_l_2_html.zip" (le generateur) (voir Figure 16.4). 



Figure 16.4 

Telechargement 
du kit 

SWFObject2. 
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Dans le repertoire de votre site (en l'occurrence, dans notre dossier Exemples), decompres- 
sez directement les deux fichiers. Le dossier "SWFObject.js" peut etre place a la racine du 
projet. La page HTML, index.html, une fois utilisee, peut etre supprimee du projet. Dans les 
fichiers d'exemple de cet ouvrage, nous avons renomme cette page "SWFObject- 
Index.html", pour eviter toute confusion avec d'autres fichiers. 

En parcourant le dossier "SWFObject/" apparu a la decompression, nous distinguons, dans 
ce repertoire, le fichier JavaScript "swfobject.js", ainsi qu'un installeur de mise a jour du 
lecteur Flash nomme "expresslnstall.swf". Dans ce meme dossier, deux pages HTML pro- 
posent deja le code pour l'integration d'un document Flash selon deux methodes differen- 
tes. La page "index.html" affiche une integration stride et conforme avec des balises 
HTML. La page "index_dynamic.html" integre le Flash a partir du JavaScript. Cette 
seconde proposition adopte un codage tout a fait conforme, mais elle offre l'avantage de 
neutraliser le blocage d'Internet Explorer sur les applications multimedias (avec le message 
"cliquez pour activer ce controle"). Vous pouvez done utiliser l'un ou l'autre de ces deux 
fichiers pour mettre en forme votre page HTML, selon la technique de votre choix. 

Vous pouvez aussi lancer dans le navigateur la page que nous avons renommee "SWFOb- 
jectlndex.html", pour obtenir un code personnalise. Pour utiliser cet installeur, procedez 
comme suit : 

1. Lancez la page SWFObjectIndex.html dans un navigateur. 

2. Cette page affiche un formulaire dans lequel nous avons simplement a designer le nom 
et 1' emplacement relatif du document Flash (a partir de la page HTML qui doit contenir 
le Flash), ainsi que ses dimensions en pourcentage ou en pixels (voir Figure 16.5). 
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Figure 16.5 

Apercu du gene- 
rates dans le 
navigateur. 



SWFOtitccl 1 HTML ind j4wV1.pl g 



3. Le generateur affiche les noms des fichiers scripts (swf obj ect . j s) et de l'installeur 
express (expresslnstal . swf), comme figurant a la racine du projet. 

4. Pensez d'abord a ajouter le nom du repertoire swf obj ect/ qui organise ces elements, 
afin que le navigateur qui executera la page puisse atteindre ces fichiers. 

5. Choisissez un type d'integration stricte ou dynamique. 

6. Cliquez ensuite sur Generate afin d'obtenir le code HTML de base de votre document. 

7. Puis, selectionnez ce code et copiez-le dans une nouvelle page HTML vierge que vous 
nommerez index.html, si vous en faites votre page d'accueil (voir Figure 16.6). 



Figure 16.6 

Parametrage du 
document HTML 
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Dans le dossier des exemples du livre, vous trouverez la page enregistree, avec l'option 
d'integration dynamique, sous le nom de "chl6_referncementFlash_2.html". 

En l'ouvrant dans le navigateur, si le lecteur Flash 10 ou superieur est integre, la page appa- 
rait normalement. A defaut, la version alternative est affichee. Cette version alternative est 
basique. Le contenu Flash s'affiche dans un coin de la page. Pour ameliorer l'integration 
des contenus, nous pouvons personnaliser le document. 

Tester avec plusieurs versions du lecteur Flash avec Flash Switcher. Vous pouvez tester le 
comportement de la page a partir de differentes versions de lecteur Flash, depuis la meme fenetre de 
navigateur, sans necessairement disposer de plusieurs configurations pour ce faire. [.'extension 
de navigateur Flash Switcher offre cette possibility. Pour en savoir plus I'assistant Flash Switcher, 
consultez le lien suivant : http://www.sephiroth.it/firefox/flash_switcher/index.php. 



Personnaliser le document 

Dans le mecanisme du JavaScript SWFObject, le contenu alternatif est toujours affiche par 
defaut dans la fenetre du navigateur. C'est uniquement lorsque JavaScript detecte le lecteur 
Flash qu'il affiche l'animation SWF (voir Figure 16.7). Le cas echeant, c'est la version 
HTML qui est affichee. Mais nous devons bien comprendre que ce HTML est deja en place, 
il n'est simplement pas visible si le lecteur Flash est actif (voir Figure 16.8). Pour cette rai- 
son, ce mecanisme est favorable a l'indexation du contenu et peut etre interprets par tous les 
navigateurs. 



Figure 16.7 

Apercu de l'ani- 
mation Flash. 
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Figure 16.8 




Apercu de la 
page HTML 
alternative. 



©Exemples > chl6_referencementFlash_2b.html 
Exemples > chl6_referencementFlash_2.fla 

Dans le document "chl6_referencementFlash_2b.html", nous avons substitue le contenu 
alternatif affiche par defaut par le generateur SWFObject (voir section precedente), par un 
texte formate avec des styles CSS, une image, un hyperlien et des titres. 

Dans le corps de la page, en lieu et place du contenu de labalise <div id= " content "></div>, 
nous avons introduit le texte alternatif. Les formatages CSS, eux, sont ajoutes dans l'en-tete 
du document : 

<style type="text/css"> 



body { 

padding :0px; 

margin:0px; 
font-size: 16px; 
font-family :Arial, Helvetica; 
background-color: #071B22; 
color: #FFF; 

background-image: url(); 
background-repeat: repeat-x; 
height: 100%; 
overflow: hidden; 



< I — 



html { 



height: 100%; 

} 



} 

#donnees{ 



height: 90%; 
width :550px; 
margin: 20px; 
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position: relative; 
text-align: justify; 

} 

h1{ 

color:#FFF; 
font-size:48px; 

} 

h2{ 

font-size:36px; 
border-bottom-width: 1px; 
border-bottom-style: solid; 
border-bottom-color: #FFF; 

} 

h3{ 

display: block; 
font-size: 12px; 
background-color: #333; 
padding: 3px; 

text-transform: uppercase; 

} 

a:link { 

color: #CCC; 

} 

#design a:link { 
color: #666; 

} 

a:visited { 
color: #CCC; 

} 

a:hover { 
color: #FFF; 
} 

#design a: visited { 
color: #666; 

} 

#design a: hover { 
color: #000; 

} 

ul, li{ 
margin:©; 
padding:0; 

} 

li{ 

display:inline; 

} 

#design { 

background-color: #FFF; 
color: #000; 
padding-top: 5px; 
padding-right: 10px; 
padding-bottom: 5px; 
padding-left: 10px; 
font-size: 14px; 

} 

#design h2 { 
font-size: 18px; 
border-bottom-width: 1px; 
border-bottom-style: solid; 
border-bottom-color: #000; 

} 
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Afin que le contenu Flash puisse apparaitre en occupant toute la surface de la fenetre du 
navigateur, nous lui avons attribue des dimensions de 100 % en largeur et en hauteur. Mais, 
comme nous employons un codage XHTML strict, nous devons aussi rappeler au naviga- 
teur que le corps du document et la structure HTML generale sont etendus, eux aussi, sur 
toute la surface de la fenetre de navigateur. A defaut, le contenu Flash n'apparaitra pas dans 
Firefox. C'est la raison pour laquelle, dans la feuille de style, nous ajoutons les attributs 
CSS height : 1 00% pour chacun des elements qui contiennent le Flash. 

De meme, afin de supprimer la barre d'ascenseur verticale qui resulte de l'integration du 
Flash, nous la masquons en ajoutant, dans le style pour le corps de la page (body), l'attribut 
overFlow, passe sur la valeur "masque" (hidden). Nous pourrions aussi afficher un Flash a 
seulement 99 % de la hauteur, au risque toutefois d'ajouter une petite marge en bas de la 
fenetre de navigateur. Vous appliquerez l'option a votre convenance. Notez cependant que 
1' option overFlow induit une surface limite pour afficher le contenu alternatif. Dans ce cas, 
si un contenu important doit apparaitre, nous vous conseillons de creer d'abord un som- 
maire, puis de repartir le contenu sur differentes pages HTML successives qui elles, n'utilisent 
pas cet attribut. 

Le contenu SWF peut desormais etre affiche a 100 %. Mais pour cela, nous devons aussi 
ajouter des controles ActionScript, comme vu Chapitre 15, afin de redefinir le positionne- 
ment et l'echelle des objets selon les dimensions de la fenetre. Sans cela, le Flash resterait 
cale en haut et a gauche, sans etre redimensionne. Seule la couleur d'arriere-plan du document 
SWF occuperait toute la surface de l'ecran. 

Le document Flash "chl6_referncement_2.fla", dont l'exportation au format SWF est integree 
dans notre page HTML, affiche le code suivant : 

// initialisation 

import gs.*; 
import gs. easing.*; 
import gs. events.*; 

// actions 

interf ace_mc . lancer_btn . addEvent Listener (MouseE vent .CLICK, volPapillon) ; 
function volPapillon (evt :MouseEvent) { 

TweenMax. to ( interf ace_mc.Papillon_mc, 3, {rotation:-360, delay:0.2, 

ease:Strong.easeInOut}) ; 

} 

// mise a l'echelle pour remplissage a 100 % de la page HTML 
stage . scaleMode = StageScaleMode.NO_SCALE; 
stage. align = StageAlign.TOP_LEFT; 

stage. addEventListener(Event. RESIZE, redimensionneSWF) ; 
function redimensionneSWF(event:Event) { 

f ond_mc .width=stage . stageWidth ; 

f ondjnc . height=stage . stageHeight ; 

// 

interf ace_mc . x=stage . stageWidth/2; 
interf ace_mc . y= (stage. stageHeight 12) -20; 

} 
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Ce code reorganise l'affichage et les dimensions des elements dans la scene, selon la taille 
de la fenetre du navigateur. 

Pour en savoir plus sur la gestion elastique et flottante du contenu Flash, reportez-vous au 
Chapitre 15 qui traite de la creation de sites Full Flash. 

■ Les pages satellites. Les pages satellites sont des pages HTML qui reprennent des contenus textes 
Ejj edites initialement dans un site en Flash. Cette technique, employee jusqu'a ce que Google sache 

interpreter le Flash (jusqu'en 2008 done), aidait I'indexation des sites tout en Flash. Elle n'est plus 
recommandee aujourd'hui, parce que Google sait maintenant lire le contenu en Flash, mais aussi 
parce que, comme toute technique de diversion, elle finit malheureusement par etre trap souvent 
employee contre I'utilisateur. Ces pages ne sont done plus vraiment prises en compte sauf lorsqu'elles 
servent reellement le contenu et se presentent comme des pages d'accessibilite alternatives, juste- 
ment. C'est le cas pour des textes destines aux appareils mobiles ou qui apportent des informations 
utiles accessibles rapidement au format texte, par exemple (adresses, coordonnees, contenu 
editorial). 

■ Pour en savoir plus sur SWFObject2. Une page francaise decrit admirablement les options dis- 
H ponibles pour la gestion d'un contenu Flash avec SWFObject2. Consultez ce lien clair et instructif 

pour en savoir plus sur ce sujet : http://egypte.olympe-network.com/swfobject-frartcais.html. 

A retenir 

■ II est possible d'afficher un contenu alternatif a Flash pour les utilisateurs qui ne disposent pas du 
lecteur. Pour cela, nous utilisons le script SWFObject2. 

■ II existe deux methodes conformes pour I'integration du Flash : une methode HTML stricte et une 
methode en JavaScript pour contourner le blocage d'lnternet Explorer. 

■ La gestion de l'affichage du Flash a 1 00 % de la surface de la fenetre de navigateur se determine en 
attribuant des hauteurs de 1 00 % aux conteneurs HTML, et en definissant des comportements 
d'echelle et de positionnement, en ActionScript, dans le Flash. 



Synthese 

Dans cette annexe, vous avez appris a rendre indexable un site entierement realise en Flash, 
pour favoriser son positionnement dans les moteurs de recherche. Vous avez apprehende le 
mecanisme de Google dans sa recherche de contenus. Vous avez appris a gerer l'affichage 
d'un site pour les systemes qui ne disposent pas du lecteur Flash et notamment certains 
appareils mobiles. Vous etes en mesure de realiser et concevoir des interfaces Flash entierement 
indexables par les moteurs de recherche. 
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Introduction 

Dans cette annexe, nous presentons les outils d'aide a la conception de sites accessibles, 
dans Flash, pour les personnes a "mobilite reduite sur le Web", qui utilisent des logiciels 
d'accompagnement pour lire les contenus (lecteurs d'ecran). 

Si Flash est naturellement permissif aux lecteurs d'ecran, a condition toutefois qu'il soit 
integre de maniere stricte, des options de formatage et des methodes de conception permettent 
d'organiser le contenu de maniere encore plus lisible. 

L' organisation d'un site accessible apparait bien souvent comme une contrainte pesante en 
production, mais elle permet souvent de resoudre aussi des problemes evidents d'ergono- 
mie. Si un site est accessible pour un lecteur d'ecran, il le sera pour tout utilisateur. De plus, 
si un site est accessible et pertinent pour tout utilisateur, il sera aussi valorise par les moteurs 
de recherche. Realiser un site accessible offre done de nombreux avantages qui apportent a 
tous les utilisateurs. Rien n'empeche cela dit, ponctuellement, de realiser des contenus qui 
sortent de ce cadre drastique, si la base, elle, demeure au moins sufrisamment ouverte a tous 
les utilisateurs. 

Flash propose, dans son interface, differents outils d'aide a l'accessibilite. Les metadon- 
nees, que nous avons developpees precedemment, y concourent. Mais aussi, les titres, les 
descriptions, l'ordre des tabulations et des champs, ainsi que quelques classes ActionsScript 
dont nous vous presentons ici les ressources pour pouvoir les utiliser et etendre plus specifi- 
quement vos developpement vers ce type de configuration. 

Les options d' accessibilite sont utiles pour toutes les personnes "a mobilite reduite sur le 
Web" au sens large, qu'il s'agisse de malentendants, non-voyants, paraplegiques, mais aussi 
les "accidentes ponctuels de la vie domestique" voire, les utilisateurs sans handicap mais 
dont l'equipement informatique ne fonctionne tout simplement pas correctement. Un etran- 
ger sur un site exclusivement en francais est en situation de handicap. Une personne sans 
plugin adequat pour visualiser un site Flash est en situation de handicap (voir Annexe pre- 
cedente). Un texte ecrit trop petit face a une personne malvoyante (et qui n'use pas de lec- 
teur d'ecran) et dont il n'est pas possible d'augmenter la taille du texte. . . est en situation de 
handicap. Une personne habituee a naviguer en usant que du clavier face a une interface uti- 
lisateur exclusivement basee sur l'usage de la souris est en situation d'handicap. Un site fai- 
sant appel a une video sans sous-titre, pour un utilisateur en entreprise qui n'a pas d'haut 
parleur, le place en situation de handicap, Un site qui prevoit le chargement d'un PDF pour 
palier a un soucis d' accessibilite et qui fournit un PDF non accessible place l'utilisateur en 
situation d'handicap. Et autant d'autres situations cocasses qui nous mettent tous en situation 
de handicap. Nous sommes done a priori tous concernes. 
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La fenetre Accessibilite 

Vous pouvez ajouter des titres, des descriptions et associer des controles de navigation, a 
tout symbole distribue dans Flash. II suffit de renseigner les champs mis a disposition par la 
fenetre d' accessibilite, pour ce faire. 



Exemples > ch 1 6_accessibiliteFlash_l .fla 



Dans ce document, la scene affiche quelques symboles dont un champ de texte, un Movie- 
Clip et un bouton (voir Figure 17.1). 



Le vol du papillon 



Figure 17.1 

Apercu de la 
scene principale. 




Vous pouvez ajouter des titres et des descriptions sur la scene et sur les objets eux-memes 
avec le menu Fenetre > Accessibilite. 

Une fenetre apparait et affiche differents champs de saisie. Cliquez en dehors de la scene de 
maniere a ne rien selectionner. La fenetre d' accessibilite affiche alors les entrees pour la 
scene. 

Renseignez les champs Nom et Description pour informer l'utilisateur sur le type de contenu 
mis en scene (voir Figure 17.2). 

Vous pouvez egalement renseigner des informations, plus ponctuellement, pour chaque 
objet. II suffit de le selectionner et de renseigner les champs qui correspondent a votre selection 
active. 

Cliquez successivement sur les symboles interf ace_mc, papillonjnc, sur le champ de 
texte dynamique et sur le bouton, puis, inscrivez les textes qui decrivent succinctement ce 
qu'ils representent. 
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Figure 17.2 

Apercu des 
options pour la 
scene principale. 



fVl Rendre I'animation accessible 

M Rendre les objets enfant accessibles 

M Etiquetage automatique 



Nom : Le vol du papillon 



Description 



Cette animation fait 
tourner un papillon a 
360° sur lui-meme. 



Figure 17.3 

Informations 
d'accessibilite 
du symbole 
papillon_mc. 



(Vl Rendre I'objet accessible 

M Rendre les objets enfant accessibles 



Nom : Papillon 



Description : Pa P illon co]or * et 
stylise (forme 

vectorielle) 



Raccourci : P 



Ordre des 2 
tabulations : 



Figure 17.4 

Informations 
d'accessibilite du 
champ de texte 
statique. 



(V| Rendre I'objet accessible 




Description : 


Titre Le vol du papillon 










Ordre des 
tabulations : 


3 
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fVl Rendre I'objet accessible 



Nom : bouton Lancer 

Description : Active une rotation a 
360° sur le papillon 

Raccourci : ' 

Ordre des Fj 
tabulations : 

Lorsque des symboles enfants sont distributes a l'interieur d'un objet, 1' option Rendre les 
enfants accessibles est proposee. Par defaut, tous les enfants sont accessibles. Mais, dans 
certains cas, il peut etre interessant de neutraliser cette option arin d'eviter des bruits visuels 
inutiles et masquer des objets purement graphiques utilises pour l'habillage. Cela contribue 
a simplifier l'ossature du document et facilite l'acces aux autres contenus. 

Vous remarquez que, dans certains cas, les options Ordre des tabulations et raccourci sont 
egalement disponibles. 

Les raccourcis permettent a l'utilisateur du lecteur d'ecran d'acceder directement a I'objet, 
par simple activation d'une touche du clavier. Vous devez inscrire la lettre que vous souhai- 
tez designer comme touche a activer pour rendre cet objet accessible. Utilisez de preference 
une lettre a consonance dure qui resume la tonalite du mot ou sa premiere lettre. Dans notre 
exemple, la lettre 1 est employee pour designer le bouton Lancer. 

Dans le champ Ordre des tabulations, specifiez le nombre de fois pour lequel l'utilisateur 
doit appuyer sur la touche Tabulation, pour activer l'element designe. Dans notre exemple, 
le bouton Lancer est associe au chiffre 1. II faudra done appuyer une fois sur la touche Tabu- 
lation pour activer ce bouton, une fois le module Flash prealablement active. Lorsque vous 
publiez la page HTML du document Flash dans le navigate ur, pour activer 1' animation avec 
les options d'accessibilite, procedez comme suit : 

1. Activez d'abord I'objet Flash en cliquant dessus ou en appuyant sur la touche Tabulation 
une premiere fois. 

2. Puis, une fois le Flash actif, appuyez de nouveau sur la touche Tabulation, autant de fois 
que la valeur designee dans le champ Ordre des tabulations de la fenetre d'accessibilite. 

3. Puis, appuyez sur la touche Entree pour confirmer 1' activation des instructions associees a 
cet objet. 

Ann de garantir une ergonomie la plus coherente qui soit, utilisez un ordre des tabulations 
qui corresponde autant que possible a l'ordre logique et chronologique d'execution des 
evenements. 



Figure 17.5 

Informations 
d'accessibilite du 
symbole bouton. 
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■ Accessibilite dans Flash. Pour en savoir plus sur I'accessibilite dans Flash, consultez aussi le lien suivant : 
W http://help.adobe.eom/fr_FR/Flash/1 0.0 UsingFlash/WSd60f 23 1 1 0762d6b883b 1 8f 1 Ocbl - 

m fel af 6-7c3ea.html#WSd60f 23 1 1 0762d6b883b 1 8f 1 0cbl fel af 6-7c3ca. 



A retenir 

■ L'edition de textes de description pour I'accessibilite est disponible dans Flash. Pour cela, utilisez la 
fenetre Accessibilite. 

■ Pour restreindre I'acces a des informations utiles uniquement, il est possible, a I'inverse, de neutrali- 
ser des objets. Pour cela, nous desactivons les options d'accessibilite des objectifs actifs, depuis la 
fenetre d'accessibilite. 



Concevoir un document Flash pour les non-voyants et 
malentendants 

Parmi les utilisateurs de lecteurs d'ecran non-voyants ou malentendants, des recommanda- 
tions specifiques sont a suivre. Nous les detaillons dans cette section : 

• Evitez de creer des boucles d' animation qui provoquent un bavardage encombrant. Lors- 
que la tete de lecture rejoue perpetuellement des images sur lesquels des textes sont affi- 
ches, ces informations peuvent etre repetees indefiniment et a voix haute, par les lecteurs 
d'ecran. Cela perturbe la navigation. Pensez a appliquer un stop sur chaque image du sce- 
nario qui designe une nouvelle rubrique. Privilegiez les conceptions de site dans le scena- 
rio, oil chaque rubrique est jouee l'une a la suite de 1' autre, et separee par un stop. Les 
interfaces dynamiques ne sont pas encore totalement digestes par tous les lecteurs d'ecran. 

• Evitez d'imposer un son ou une ambiance musicale trop pregnante afin de permettre 
aux utilisateurs d'entendre leurs propres lecteurs d'ecran lire les contenus. 

• Ne vectorisez pas le texte, car les objets graphiques et les images ne peuvent pas etre 
identifies. 

• Associez la plupart des actions a des commandes du clavier, en plus des commandes de 
souris. Cela permet aux personnes qui n'accedent pas a la souris de compenser en utilisant 
le clavier. 

• Le mode transparent et opaque, sans fenetre, defini dans les parametres HTML du document 
Flash, rendent le Flash completement inaccessible. Evitez d'utiliser ces options. 

• Pensez a associer, autant que possible, des textes a chaque objet interactif (boutons, 
liens, zones d' interaction) pour en faciliter la reconnaissance. 

Aides au developpement de contenus specifiques pour les malentendants et les 
malvoyants. Des outils d'aide au developpement sont disponibles a I'adresse suivante, pour 
Windows uniquement : 

http://help.adobe.com/fr FR/Flash/1 0.0 UsingFlash/WSd60f23 1 1 0762d6b883b1 8f 1 Ocbl fel af6- 
7c47a.html. 
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A retenir 

■ Pour rendre un site accessible aux non-voyants et malentendants, il est recommande d'organiser les 
contenus dans le scenario en privilegiant les textes. 



Synthese 

Vous avez appris a optimiser un site pour 1' accessibility et rendre un contenu Flash presque 
universel. Vous etes en mesure, a present, de creer des sites pour le plus large public, tout en 
apportant une valeur graphique ajoutee et fonctionnelle, significative. 



Ressources 



Quelques ressources pedagogiques pour le developpement en ActionScript 3 et les techno- 
logies associees a la creation d'interfaces riches sont disponibles en ligne. Vous trouverez 
ci-apres une liste non exhaustive des dernieres publications qui completeront idealement cet 
ouvrage. 



Livres 

D' After Effects a Flash, de Flash a After Effects, Richard Harrington et Marcus Geduld. Ed. 
Pearson. DVD inclus. Couleur. 38 €. 

Cet ouvrage vous accompagnera idealement pour etendre vos connaissances sur la 
video interactive avec des creations graphiques, realisees dans After Effects. 

L'art du bluff avec Flash CS4, Chris Georgennes. Ed. Pearson. DVD inclus. Couleur. 29 €. 

Pour prendre en main les outils d' animation, de maniere didactique, avec des notions 
pratiques d'animateurs professionnels. 

Apprendre a programmer en ActionScript 3, Anne Tasso. Ed. Eyrolles. Noir et 
blanc. 29,90 €. 

Ce livre aborde l'interfacage dynamique sans aucun element place sur la scene. II peut 
vous accompagner dans l'automatisation de certains processus de mise en forme, 
surtout pour des contenus externalises. 

Pratique d ActionScript 3, Thibault Imbert. Ed. Pearson. Noir et blanc. 56 €. 

La reference de la programmation en ActionScript 3. Ce livre contient les techniques les 
plus avancees en terme de developpement, avec de nombreux conseils relevant de 
l'optimisation des ressources utilisateur. Vous y abordez aussi les entrailles du lecteur 
Flash pour vous familiariser encore plus avec la logique intrinseque de Flash. 



Tutoriels videos 

www.alltutorial.com 

Ce nouveau petit site pratique et prometteur propose des tutoriels videos entierement 
gratuits et de qualite, en langue francaise, sur les logiciels graphiques. 

Tv.adobe.com/fr 

Ce site propose des tutoriels videos sur les produits Adobe, en francais. D'autres tuto- 
riels sont disponibles sur la version americaine, directement a l'adresse tv.adobe.com. 
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Sites web et forums 

www.thefwa.com 

Le site des references en Web design offre plusieurs centaines de liens vers les sites les 
plus elabores graphiquement. Une reference incontournable. 

flash.mediabox.fr 

Le forum des developpeurs en ActionScript. De nombreuses astuces et conseils sur vos 
developpements . 

blog.greensock.com/tweenmax 

Les dernieres mises a jour de la classe TweenMax, disponible directement sur ce site, et 
son forum, en anglais. 

www.sephiroth.it 

Un site communautaire sur le developpement en general, dont ActionScript 3 en parti- 
culier. 

sketchup.google.com/intl/fr 

Le site de presentation du logiciel gratuit Google Sketchup, pour la modelisation 3D. 
Ce site propose aussi une bibliotheque d'objets 3D ainsi qu'une riche documentation, 
en francais. 

flash.mediabox.fr 

Le forum des developpeurs en ActionScript. De nombreuses astuces et conseils sur vos 
developpements. 

www.papervision3d.org 

Le site de la communaute des developpeurs de la classe PaperVision. 

www.adobe.com/fr/devnet/actionscript 

Le site communautaire des developpeurs ActionScript, par Adobe. De nombreux conseils, 
methodologies et solutions connexes y sont presentees. 

www.yazo.net 

Un site pour apprendre les bases du langage ActionScript 1, 2 et 3, avec les fichiers en 
libre telechargement et la palette Yazo. 

Dictionnaires 

Aide contextuelle 

Flash integre une aide contextuelle pour vous aider a decouvrir les definitions des diffe- 
rentes methodes, proprietes, et autres elements du langage ActionScript. Depuis la fenetre 
d Actions, faites clic-droit, puis activez l'option Aide. 

www.adobe.com/support/documentation/fr/flash 

Cette page recense les differentes aides disponibles pour l'apprentissage dAction- 
Script, au format texte. 
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3D 289 
affichage, optimiser 268 
After Effects 147 
ameliorer 1' affichage des 

images 250 
animation 

Caurina 250 

Tween 250 

TweenMax 250 
banque d'objets 3D fibres 300 
champ de vision 284 
exporter 299 
focale 284 
galerie video 268 
Google Sketchup exporter 300 
livre interactif realiste 250 
mouvements 

d'objets 311 

de camera 304 
mur d'images 260 
native 241 

optimiser un site 3D 314 
PaperVision 

aide en ligne 328 

guide de reference 328 

interactivite avec les 
objets 3D 328 

lumiere 328 
point de fuite 283, 284 
propriete 

rotationX 241 

rotationY 241 

rotationZ 241 

x 241 

y 241 

z 241, 279 
rendu (publication) 311 
verso des objets 3D 248 
video 174 

Voir aussi Modeliser et 
PaperVision 



A 

A AC, codec 183 

Acceleration 18, 53 
materielle 441 

Accessibilite 477, 481 

Acrobat 450 

ActionScript 134 

difference entre AS2 et AS3 9 
importer AS 1/AS2 dans AS3 
458 

philosophie du langage 9 
random 101 
addASCuePoint 226 
addChild 275, 286 
addpageO 354 
Adobe After Effects 147 
exporter 

directement le projet vers 

Flash 153 
FLV 149, 154 
Adobe Media Encoder 177 
audio, onglet 183 
bandes noires 160 
debit 183 

exporter en FLV 155 
Filtres (onglet) 162 
formats pris en charge 156 
frequence 183 
Multiplexeur 162 
niveau 182 
profil 181 
recadrer 158 

reglages d'exportation 158 
video, onglet 179 
Adobe Photoshop 

gestion des couches 365 
Voir aussi Photoshop 



Adobe Premiere Pro, exporter 

en FLV 154 
ADSL 151, 164 
Affichage 

elastique 443 

flottant 443 

plein ecran 437, 440 
AllowFullScreen 439 
quitter 443 
Afficher 

contenu alternatif a Flash 469 

plein ecran 473 

symbole 37 
Aide de Flash 111 
Aliasing 250, 268, 452 

Voir Lisser les images 
align, proprietes 446 
AllowFullScreen 440, 443 
alpha 396 

propriete 12 
AMFPHP 135 
Amortissement 18, 22, 53 
Anaglyphe Voir Relief 
Angle 22 
Animation 7 

3D (Voir 3D) 279 

boucle 23 

detecter la fin 35 

enchainer 36, 47 

fluidite 28 

forme 86 

intervalles dans le temps 59 
optimiser 14 
panoramique 7 
plus nette 27 

retablir les proprietes animees 

apres une interpolation 73 
Tween et TweenMax 29 
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Animer un livre 3D 242 
API 331 

Apple Compressor 147 

Apple Final Cut Pro, exporter 

en Quick Time 154 
Apple iMovie, exporter en DV 

ouMOV 155 
Apple Motion 141 

exporter en Quick Time 145 
Apple Time Machine 279 
Appliquer des proprietes de 

MovieClip a un objet 64 
Armature 77 
Array 384 

Arreter le scenario 58 
Arrondir un chiffre 231 
AS3AnimationSystem 29 
Ascenseur 54 
masquer 475 
Assistant TweenMax 42 
Asterisque (*) 33 

Atteindre une image du scenario 

59 

Audio 161, 167, 206 
AAC 183 
Debit 183 
Frequence 183 
volume 205 

B 

Barre 

d'ascenseur 54 

de chargement 106 
BevelFilter 65, 70 
Bezier 42, 44 
Bibliotheque 

exporter pour ActionScript 383 

partagee 454 
Bitmap 331, 385 
BitmapData 334, 359, 385 
Blender 299 
BlurFilter 65, 68, 340 



Bones 77, 79 
Boucle 23, 59, 64 

accessibilite 481 
arreter 64 
for 258 

realiser une texture raccord 24 
Bouton 

bascule, interrupteur 442 

cibler son contenu 395 

conflit d'interactivite 400 

etats 389 

interfac.able 395 

masquer la main au survol 414 

neutraliser, desactiver 414 
bufferTime 203 
byteArray 451 

c 

Cache video 203 
cache AsBitmap 335 
Cadence 10 

animations Flash 165 

video 138, 143, 165 
modifier 165 
Caique, nommer 8 
Camera3D 311 
CaptionButton 215 
Caracteres 

manquants 435 

speciaux 10 
Carrousel 251 
Carte interactive 38 
catch 133, 134 
Caurina 29, 250 
CBR, VBR Voir Video 
Centre des symboles 24, 247 
Chaine de caracteres, 

conversion 121 
Champ de texte dynamique 111, 
431 

Chapitrage 207 
Chargement 102 

contenu 



chemin 103 
externe 103 
erreurs 131 

Voir aussi Progression et 
Chargeur 
Chargeur 235 

d'image 103 
Chronometre 59 
Ciblage 

contenu 

imbriques 232, 235, 237 

inexistant 403 

symbole bouton 395 
dynamique 259 
etiquette dans Flash 423 
objet dynamique 258 
Cinema 4D Rll 299 
Cinematique inverse 77 
Classes 11 
apres la compilation 42 
AS3AnimationSystem 29 
Caurina 29 
centraliser 42 
compiler 102 
contextMenu 417 
Filters 57, 65 
ik 77 

getArmatureAt() 82 

IKJoint 77 

registerElements() 83 

importer 11, 32, 41, 51, 290 
installer 428 

localiser sur le systeme 32 

mecanisme 29 

Timer 57, 59, 60 

transitionManager 57, 59, 63 

Twease 29 

Tween 29, 34 

TweenEvent 35 

TweenMax 29, 38 
classPath 42 
Clavier 

accessibilite 481 

commandes inactives en mode 
plein ecran 441 

interactivite 315 
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navigation 320 

tableau des valeurs des touches 

323 

Clip Voir MovieClip 
Codage differentiel 1 80 
Codec video 137 
colorMatrix 343 
ColorMatrixFilter 345 
ColorTransform 360 
Communication Flash/HTML 
417 

Compilation 29, 33 
Composant 

FLVPlayBack 169 
parameter 174 
ScrollBar 431 
Compter 
nombre d' images dans le 

scenario 245 
nombre d'objets dans un 

symbole 258 

concat 346 
Concatenation 346 
condenseWhite 434 
Conditions 14, 18, 393 
content 235 
contentLoaderlnfo 107 
Contenu alternatif 469 
contextMenu 417, 419, 420 
ContextMenuBuiltlnltem 419 
Controle du temps 59 
Conversion degres et radians 22 
Convertir un fichier KMZ en 

DAE 303 
Convertir un objet 64 

en MovieClip 64 
copyChannel 385 
Couche, extraire 385 
Couleurs 

decimale 356 

hexadecimale 356 

modifier 356 



nuancier, creer 357 

prelever 360 

puits, creer 357 
CoverFlow 251 
Crenelage 250, 268, 452 

Voir Lisser les images 
CSS, dans Flash 430 
CUE_POINT 226 
CuePoints 211, 217 
currentFrame 376 
currentTarget 129, 131, 392 
Curseur de defilement 54 

D 

Debit 183 
Decalage 53 
Deceleration 18 
Defilant 48 
Deformation 13 
Degrouper 451 
Deplacer un symbole 

(startDrag) 406 
Detecter 

fin d'une animation 35, 47, 64 

image du scenario 376 

version du lecteur Flash 469 
Developpement 

back-office 134 

front-office 134 
Dictionnaires 484 
Difference (operateur !=) 267 
Dimensions 

d'une page web 139 

de la fenetre de navigateur 437 
displayState 442 
Document, organiser 8 
Donnees, gerer avec XML 121 
draw 385 

DropShadowFilter 65, 69 
DSMax 299 



E 

easing 32 

Echantillonner la video pour 
Flash 153 

Ecouteur 103 

arreter 55 
placer 63 
Effets 26, 57 
amortissement 22 
fenetre 149 
ralenti 21 
reflet 254 
relief 377 

speciaux 141, 147, 153 
Elasticite Voir Affichage flottant 
Embed 463 
Enchainer 

des actions 266, 412 

les animations 35 
ENTER_FRAME 52, 207, 228 
Enveloppe video 173 
Ergonomie 48 
Erreur 

chargement 131 

execution 131 
Espace memoire 

optimiser 14 

typage 20 

Etendre les proprietes d'un 
objet 64 

Etiquette 423 

creer 426 
Event 20 

Event.ENTER_FRAME 10, 14 

Execution, mode pour les 
squelettes 92 

Extension 10, 14 

.as 102 
de classe 64 
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F 

F4V 162 

QuickTime 184 

Voir aussi Video 
filters 65, 264, 345 

GlowFilter 268 
Filtres 65, 264, 345 

animation et interpolation 352 

appliquer 343 

biseau 70 

Bleu 348 

correction des couleurs 343 

Cyan 348 

decliner 71 

flou 68, 340 

halo 69, 70, 268 

Jaune 348 

Magenta 348 

Melangeur de couleurs 348 

negatif 347 

ombre portee 68, 69 

par lot 35 1 

proprietes 73, 75 

Rouge 347 

saturation 345 

Vert 347 
finally 133 
fl 32 
Flash 

structurer un document 464 

vs. HTML 466 
FlashPaper 451 
Flottement, effet 19 
FLV 162 

FLVPlayBack 169, 174, 187 
ActionScript 2 et 3 170 
autoPlay 273 
BackButton 190 
boutons separes (voir Video) 
189 

BufferingBar 190 
CaptionButton 190 
contentPath 170 
fenetre 169 



ForwardButton 190 

FullScreenButton 190 

MutteButton 190 

PauseButton 190 

PlayButton 190 

Play PauseButton 190 

Preview 174 

scaleMode 273 

SeekBar 191 

skin 172 

source 170, 273 

stop 273 

Stopbutton 191 

VolumeBar 191 
FLVPlayBackCaptioning 211 
Focus 413 
Fonction 

interrompre 274 

neutre 60 

nommer 10 

parametre 60 
Fonctionnalite applicative 48 
for 127, 131, 258 
for each... in 259 
Formats video 140 
Forme Voir Animation 
FreeCamera3D 311 
Frequence 183 
FTP 168 
Full Flash 437 

G 

Galerie 

animer 29 

d'images 99 
voir Image 

video 3D 268 
getChildAt 237, 258, 286 
getPixel 359, 360 
gKaster 177 
GlowFilter 65, 70 
Google 464 
Google Sketchup 300 



gotoAndStopO 59 
Graphisme 331 
Greensock 41 
Greensock TweenMax 73 

H 

H-264, codec 179 

niveaux 182 
hideBuiltlnltemO 419 
Hierarchie, cinematique 77 
Historique de navigation dans 

Flash 428 
HTML 134, 465 

importer dans Flash 430 

lien vers Flash 423 

tester les liens 427 

voir aussi Integration 
XHTML stricte 
htmlText 434 
Hyperlien 421 

I 

i, variable d' incrementation 

111, 118 
ik 

getArmatureByName() 82 
getBoneByName() 84 
getChildAt() 83 
headJoint 77 
IKArmature 78, 82 
IKBone 77, 82 
IKEvent 82 
IKJoint 82, 83 
IKManager 78, 82, 92 
IKMover 82, 84, 94 
JKMover 78 
tailJoint 77 
Image 
aleatoire 99 
carroussel 251 
externalisee 108 
externe 99, 103, 107 
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galerie 99 

XML 113 
mur 3D 260 

realiser une texture raccord 24 

tremblante, eviter 27 
Image de scenario Voir Scenario 
iMovie 155 
import 32 
Importer 

classes ActionScript 290 

CSS dans Flash 430 

HTML dans Flash 430 

PHP/MySQL 134 

police 454 

un squelette 94 

variable 434 
Imprimer un SWF 353 
Incrementation 26, 53, 59, 111 
InDesign 450 

realiser un livre au format SWF 
250 

Indexation 464 
Initialisation 73 

int 20, 28 

Integration XHTML stricte 463 
Interactivite 315 

objets dynamiques 122 

resoudre les conflits d'objets 
imbriques 400 
Interface elastique flottante 443 
Internet Explorer, blocage des 

controles active-X 469 
Interpolation 34 

duree 266 

interrompre 36 

Tween 36 

TweenMax 45 
Interrompre 

fonction 274 

interpolation 413 

un contenu charge 235 

Inverse kinematic Voir 
Cinematique inverse 



IO_ERROR 132 
IOErrorEvent 132, 134 
ips Voir Cadence 
Iteration 258 

J 

Jauge de chargement 103 
JavaScript 134 
Jouer le scenario 59 

K 

KEY_DOWN 320 
KEY_UP 320 
keyCode 320 

L 

Label Voir Etiquette 

Langage, nommer les caiques 
automatiquement 8 

Lecteur Flash 

menu contextuel 417 
penetration (statistiques) 287 
Lecteur video 
H-264 pour Flash 6 et suivants 
191 

personnalise 188 
Levitation 18 
Lien 

HTML 421 

tester 427 

vers Flash 423 
Lipsync 86 
Lissage 250 
Lisser 

graphismes vectoriels 335 
images 331 
video 268 



Liste d'affichage 82 

modifier l'ordre 275 
Livres 483 
load 102 
loadf) 118 
Loader 100 
localConnexion 458 

M 

mask 340 
Masque 

conflit avec les polices de 
caractere 454 

dynamique 340 

progressif (bords flous) 340 
Masquer 

pointeur Main au survol d'un 
bouton 35 

symbole 37 
Math 22 

ceil 231 

random 356 
Math.random 103 
Math.randomO 101 
Maya 299 

Memoire, optimiser 9, 14 
Menu 

contextuel 417 

deroulant 407 
MENU_ITEM_SELECT 420 
metaDataEvent 226 
Metadonnees 467 

creer dynamiquement 468 

Microsoft Aero 279 

Microsoft Window Movie 
Maker, exporter en AVI-DV 

154 

Mise en cache video 139 
Mode plein ecran 437 
Modeliser 299 
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MouseEvent 37 

MOUSE_OVER 37 

MOUSE_UP 55 
mouseX 21 
Mouvement 

camera 3D 304 
organique 86 
progressif 18 
MovieClip 64 
afficher la main au survol 414 
conflit d'interactivite 400 
convertir 64 
fonction Bouton 389 
neutraliser, desactiver 414 

N 

name, propriete 83 
navigateToURL 421 
Navigation, reperes 218 
NetStream 195 
Nettete 27 

images tremblantes 27 

voir aussi Lisser 
newTween() 34 
nextFrame 377 
Nodes 79 

Nombre d'images par seconde 10 
Nommer 

fichiers et dossiers 465 

fonction 10 

occurrences 10 
Nuancier 357 
Number 9, 16, 20, 28 
numChildren 258 

o 

Object 463 
Objet 

opacite 12 
rotation 12 
visibilite 12 



Occurrences, nommer 10 
On2VP6 137, 162, 163 
onCompleteListener 47 
onStartListener 47 
Opacite 396 

accessibilite 481 
operateur != 267 
Optimisation memoire 9 
Organiser 

le code 9, 16 

les fichiers du site 102 
overwrite 413 

P 

pageRanking 466 
Pages satellites 476 
Panoramique 7 

defilement en boucle 23 
realiser une texture raccord 24 
sens de defilement 25 
PaperVision 289 
difference entre 
Camera3D et 

FreeCamera3D 311 
scene 3Detzoned'affichage 
309 

exemple en ligne 314 
importer 

MovieClip dans l'espace 3D 
309 

objet 3D DAE 308 

installer 289 

integrer 297 
nativement 297 
ponctuellement 298 

nombre de polygones 300 

pitch 314 

placer une scene 3D entre deux 

MovieClip 309 
primitives 320 
roll 314 
yaw 310, 314 
Z (propriete) 3 1 1 



zone d'affichage de l'espace 3D 
309 

zoom 311 
parseCSS 433 
Particules 141, 149 
Pas 

d'acceleration 12 

decrementation 26 
Passes d'encodage Voir Video 
PDF 450 

Performance d'affichage 441 
perspecti veProj ection 

filedOfView 284 

focalLength 284 

projectionCenter 283, 284 
Photoshop 24 
pitch() 314 
Pixelisation 250 
Pixellisation Voir Lisser les 
images 

Placer un objet au premier-plan 

275 

playheadTime 204 
Plein ecran Voir Affichage 
Podcast 168 

Poids standard d'une page web 

103 

Point(X,Y) 84 

Pointeur, aspect du pointeur au 

survol 35 
Points de repere 211 

voir aussi Video 217 
Police 

conflit avec les masques 454 

importer 451, 454 

vectoriser 45 1 
Position 

calcul 341 

d'un clip 12 

relative 412 
prevFrame 377 
Printjob 353 

Progression du chargement 105, 
107 
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Proprietes 12 

alpha 47 

animer 7, 14, 34, 44 

courantes 14 

rotation 45, 46 

scaleX, scaleY 47 

visible 37 

y 46, 52 
Pseudo extension 10 
Puits de couleurs 357 
push() 384 

Q 

Qualite 250 

Qualite d'affichage Voir Lisser 

les images 
Quick Time 184 

R 

Racine (root) 237 
Ralenti 18 
effet 21 
Rasterisation 250 
Ratio des pixels 138 
Rebondissement 18 
Rectangle 54 

Redimensionner la fenetre 446 
Referencement 463, 464 
Relief 361 

anaglyphe, creer 

a partir de 2 images 370 

ActionScript 375 

Photoshop 363 
couches RVB 365 
interfagage dynamique 377 
lunettes 

actives 361 

passives 361 
reseau lenticulaire 361 
technique de prise de vue 362 



video 377 

zone 

cadre 363 
fenetre 363, 365 
jaillissante 363, 367 
removeEventListener 14, 274 
Repartir vers les caiques 8 
RESIZE 446 
Resolution 139, 437 

limite de Flash 349 
Ressources 483 
Restauration 73 
Retard 18, 20 
Retarder une action 59 
Richmedia 48, 239 
roll() 314 

RollOver video 276 

root (racine) 237 

rotation, propriete 12 

RVBA, extraire une couche 385 

s 

scaleMode 445 
scaleX, propriete 12 
scaleY, propriete 12 
Scenario 7 

atteindre 1' image 
precedente 377 
suivante 377 

compter les images 245 

detecter l'image active 376 
Scenariser 48 
Scene 

hauteur 264 

largeur 264 

mode d'affichage 445 

propriete 3D 284 
SCPlugin 292 
Scroll 54 
seek 204, 207 
seekToNavCuePoints 218 



Separer 451 
setMetadata 468 
Sites web et forums 484 
Sketchup 304 
Skin 188 

smoothing 250, 333 
Son, accessibilite 481 
Sorenson Spark 137, 162, 163 
Sous-classe 64 
Sous-titrage 211 
Spamdexing (spam) 465 
Squelette 77 
animer 84 

avec formes graphiques 86 
charger dans un nouveau SWF 
94 

constraire 80 

contrainte de mouvement et de 

rotation 80 
definir 81 
humain 82 
mode Execution 80 
nom d'occurrence 80 
ordre d'affichage des liaisons 

81 

programmer 77 
stage 237, 445 
stageDisplayState 443 
stageHeight 264, 445 
stageWidth 264, 445 
startDrag 406 
startDrag, stopDrag 54 
Statistiques, penetration du 

lecteur Flash 287 

Streaming 210 
StringO 434 
Structure 

conditionnelle 28 
d'un document Flash 235 
flottante 476 
Styles 214, 215 
CSS 473 
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Suivre le pointeur 18 
Supprimer 

ecouteur 113 

symbole 451 

un SWF charge 232 
Surface utile 139, 437 
SVNX 292 
swapChildren 247 
SWFAddress 428 
SWFObject 428 
SWFObject2 469, 476 
Swift 3D 299 
Switch... case 393 
Symboles 

emplacement 25 

exporter pour ActionScript 383 

nom d'occurrence 8, 14 

placer le centre 24, 247 

position 27 

transparent 48 

zone active 48 
Syntaxe chameau 14 

separateurs 10 
Systemes de navigation 389 

T 

Tableau 384 

target 129, 131, 210, 392 
Technologie 466 
Teinte aleatoire 355 
Temporiser une action dans le 

temps 59 
Tete de lecture, boucle 420 
Text Layout Framework 458 
Texte 464 

accessibilite 481 

defilant 54 

dynamique 431, 452 

statique 452 

vectoriser 45 1 

Voir aussi Police 
Timecode 208, 221, 226 



Timer 59, 93, 286 

detecter la fin 64 

stopper 64 
Tortoise SVN 290 
totalFrames 245 
Touche du clavier Voir Clavier 
trace 131 

transitionManager 60, 62, 64 

definition 62 

parametres 62 
Transparence 396 

accessibilite 481 

animer 13 

du Flash 435 
Transtypage 64 

chaine de caracteres StringO 
434 

Trucage video 141, 152 
try 133, 134 
Tutoriels videos 483 
Twease 29 

Tween 29, 32, 38, 250 
enchainement 35 
instabilite 36 
interpolation 36 
interrompre 36 

TweenEvent 32, 35, 38, 47 
COMPLETE 47, 90 
enchalnements 36 
MOTION_CHANGE 36 
MOTION_FINISH 35, 36 
MOTION_LOOP 36 
MOTION_RESUME 36 
MOTION_START 36 
MOTION_STOP 36 

TweenLight 41 

TweenLite 29 

TweenMax 29, 44, 230, 250 
assistant 42 
bezier 42 

carte interactive 38 
courbe de bezier 44 
definition 45 
delay 73 



duree 266 

enchainer des interpolations a 
47 

importer la classe gs 67 

mise a jour 41 

onCompleteListener 412 

onStartListener 412 

overwrite 413 

proprieties 73 
TweenMax gs, importer 67 
Typage 14, 28 

nombre 20 
Typographic 451 

voir Police 454 

u 

UILoader 110, 112 
uint 20, 28 

unloadAndStop 235, 238 
URL 421 

URLLoader 118, 119 
URLRequest 118 
URLVariables 434 
useHandCursor 35 

V 

Valeur 

aleatoire 356 
generer 101 

incrementer 26 
Variability du debit Voir Video 
Variables 18, 28, 33, 51 

globale 116 

importer dans Flash 434 
locale 116 
si 59, 61 

valeur par expression 35 
VBR, CBR Voir Video 
Vectorisation, accessibilite 481 
Vectoriser 451 
Velocite 18, 53 
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Version lecteur Flash, 
penetration (statistiques) 287 

Video 137, 177 
3D 268 
accelerer 204 
Adobe After Effects 

manuel d'apprentissage 153 

Mode de fusion des caiques 
198 

relief 377 
Adobe F4V 162 
Adobe Media Encoder 

Autres 168 

FTP 168 

Passes d'encodage 165 
Reglages avances 166 
Reglages de debit 
CBR, VBR 165 
Variabilite du debit 165 

affichage en relief 377 

agrandir 197 

Apple Motion 165 

arreter 204, 232, 235 

dans un SWF imbrique 191 
depuis le document racine 
234 

Audio 183 

via FLY 161, 167 
boucle 215 
bruit 139 
cadence 138, 143 
capture 139 

chapitrage 207, 211, 218 
codage differentiel 180 
codec 137 
compatibilite 163 

format video de Flash 140 

composant FLVPlayBack Voir 
FLVPlayBack 

composite dans Flash 169 



compression 140, 152, 166 
configuration utilisateur 140, 
141 

debit 151, 165 
detecter la fin 217 
detourage du fond vert 153 
dimensions 268 
standard 164 
effet 3D 174 
enchalner les videos 217 
encodage 217, 219 
exporter pour Flash 6 191 
externaliser 139 
F4V 177, 179, 218, 224, 227 
Flash Media Server 210 
flux simultanes 139 
FLV 162, 218, 224, 227-228 
generateur de particules 141 
HD 139 

images-cles 166, 204, 220 
integree 229 
probleme de 
synchronisation 165 
integrer 139 
interactive 201 
lecture automatique 203 
lire 204 

avec des boutons 

preprogrammes 172 
en arriere (vitesse variable et 
fluide) 227 
lissage 268 

lumiere (prise de vue) 152 
metadonnees 226 
mise en cache 139, 203 
Points de repere (CuePoints) 

dynamiques (en 
ActionScript) 226, 227 

evenement 217, 223 

navigation 217, 220 
profondeur de couleur 143 
qualite et echelle 139 
ratio des pixels 138, 143 



remappage temporel 165 
rembobiner 205 
rollOver 276 
source 208 
sous-titrage 211 

activer/desactiver 215 
standard 139 
streaming 210 
timecode 221, 226 
trame 197 

entrelacement, progressif 
138 

transparence 137, 163 
voir aussi Adobe After Effects, 
Adoble Media Encoder, 
Adobe Premiere Pro, Apple 
Final Cut Pro, Apple iMovie, 
Apple Motion, Cadence, On2 
VP6, Quick Time, Sorenson 
Spark, Window Movie Maker 
volume audio 205, 206 
videoEvent 215 
ViewporOD 308 
Visibilite 396 
visible 396 

propriete 12 
volumeO 205 

w 

Window Movie Maker 154 
wmode 435 

X 

x, propriete 12 
XFL 450 

XML 113, 211, 217 
atteindre 

attribut 119 

nceud 119 
cibler un attribut connu 120 
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creer un document XML 117 
importer du HTML 119 
length() 119 
lire 119 

mecanisme 116 
noeud 117 

optimiser la gestion des 
donnees 121 



site dynamique 134 
structure 116 
XMP 467 



z, propriete 279 
Zone active sur un symbole 48 
Zone de defilement 54 
Zoom 122, 260 



y, propriete 12 

yaw 310 
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3D 

Acceder directement a une 
bibliotheque d'objets 3D KMZ 
300 

Aide en ligne de PaperVision 328 
Conditions d'utilisation de la 

banque d'objets 3D Google 

Sketchup 300 
Gestion des lumieres dans 

PaperVision 328 
Guide de reference PaperVision 

328 

Identifier des groupes d'objets 

pour PaperVision 303 
Interactivite sur les objets 3D 328 
La sous-classe Camera3D 311 
La video en relief 377 
Les primitives de PaperVision 

320 

Limite de taille des fichiers 3D 
300 

Lisser les images pour la 3D 250 
Optimiser un site 3D 314 
Placer un symbole par-dessus un 

objet 3D 309 
Realiser un livre interactif avec 

InDesign 250 
Sketchup 304 
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Accessibilite 

Aides au developpement de 

contenus specifiques pour les 

malentendants et les 

malvoyants 48 1 
Informations sur 1' accessibilite 

dans Flash 481 
Animation 
Animation de filtres 353 
Definir les coordonnees d'une 

courbe de Bezier pour la classe 

TweenMax 44 
Definition d'une interpolation 

TweenMax 45 
Definition de la classe 

transitionManager 62 
Eviter les images tremblantes 27 
Gerer un ascenseur avec une 

acceleration 53 
L assistant TweenMax 42 
Mise a jour de la classe 

GreenSock TweenMax 41 
Stabiliser une interpolation 

Tween 36 
Conception et integration 
Dimensions standard d'une video 

pour le Web 164 
Graphisme 
Centrer les images avec le 

composant LTLoader 110 
Definition des parametres du 

filtre flou BlurFilter 68 
Definitions des parametres du 

filtre biseau BevelFilter 70 
Definitions des parametres du 

filtre halo GlowFilter 70 
Definitions des parametres du 

filtre ombre portee 

DropShadowFilter 69 
Faut-il renseigner toutes les 

proprietes pour les filtres ? 73 



Placer un nom d'etiquette sur une 

image du scenario 426 
Realiser une image de type motif, 

raccord, pour panoramiques 24 
Resolution limite des images 349 
Systeme hexadecimal 356 
HTML 
Creer un hen HTML sans 

ActionScript dans Flash 422 
Les cibles d'affichage 421 
Tester les hens HTML sur un 

serveur distant 427 
Langage 

3D avec la classe Caurina 250 
3D avec la classe Tween 250 
3D avec la classe TweenMax 250 
Arreter un ecouteur 55 
Arreter un Timer 64 
Arrondir une valeur 101 
Calcul de la duree d'un 

chronometre 59 
Calculer avec la class Math 22 
Calculer un pas d' incrementation 

26 

Ciblage dans un document Flash 

AS3 237 
Ciblage des boutons entre SWF 

imbriques 415 
Composant FLVPlayBack pour 

ActionScript 2 ou 3 170 
Conversion de degres en radians 

et inversement 22 
Creer un fichier XML 1 17 
Definir les chemins pour les 

requetes externes 102 
Definition du constructeur Point() 

84 

Detecter la fin d'une boucle 

d' iteration Timer 64 
Difference entre Loader et 

URLLoader 119 
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Difference entre target et 

currentTarget 129 
Doit-on toujours placer un 

ecouteur sur un chargeur pour 

activer l'affichage d'un contenu 

charge dynamiquement ? 103 
Enchainer des actions a une 

interpolation TweenMax 47 
Exemples de ciblage de contenus 

dans des SWF imbriques (AS2 

etAS3) 237 
Exporter un symbole pour 

ActionScript 383 
Generer une valeur aleatoire 1 0 1 
L'ordre numerique en 

ActionScript 112 
Le transtypage 64 
Les classes 1 1 

Les noms du fichier appelant 95 
Les proprietes en ActionScript 3 
12 

Les touches de commande 321 
Lire le XML 119 
Mecanisme d'un tableau (Array) 
384 

Mecanisme d'une boucle for 127 
Nommer les occurrences 10 
Nommer une fonction 10 
Options d'impression 354 
Oil placer Fecouteur et la 

fonction ? 63 
Parameter un composant via 

ActionScript 174 
PhilosophiedeAS3 9 
Pourquoi transtyper un chargeur 

en MovieClip ? 235 
Propriete overwrite pour 

TweenMax 413 
Proprietes d'alignement de la 

scene 446 
Proprietes 3D de la scene 284 
Que fate des classes apres 

compilation des SWF ? 42 
Syntaxe chameau et separateurs 

10 



Target et currentTarget 415 
Typage des nombres 20 
Logiciel 
Centraliser les classes ajoutees 
avec les chemins de classe 
(classPafh) 42 
Installer une classe importee 428 
Localiser les classes natives de 
Flash 32 
Navigation 
Difference entre les proprietes 

alpha et visible 396 
Menus avec des symboles 
boutons 395 
PDF 

Convertir un PDF en SWF avec 

FlashPaper 451 
Creation dynamique de fichiers 

PDF 451 
Difference structurelle entre 

Flash et Acrobat 450 
Sites Full Flash 
Activer F acceleration materielle 

pour les contenus riches 441 
Deactivation des controles du 

clavier en plein ecran 441 
Modes d'affichage de la scene 

445 

Principe de flottement facon 

styles CSS 449 
Quitter le mode Plein ecran avec 

Echap 443 
Squelette 
Cibler un segment 84 
Construte un squelette pour la 

programmation 80 
Creation de squelettes humains 

82 

Heure de creation et execution 78 
Typographic 

Affichage des polices dans Hash 
452 

Le nouveau moteur de texte Text 

Layout Framework 458 
Les polices et les masques 454 
Vectoriser un texte dans Flash 
451 
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Chapitrage video avec les points 

derepere 211 
Comment reactiver les champs de 

dimensionnement de 

l'encodeur ? 220 
Composant FLVPlayBack pour 

ActionScript 2 ou 3 170 
Conflit entre la cadence des 

videos et la cadence des 

animations Hash 165 
Definition des composants 

associes a FLVPlayBack 190 
Desactiver et reactiver F affichage 

des sous-tites 215 
Enchainer plusieurs videos a la 

suite 217 
Encoder en ELV avec Apple 

Compressor 147 
Etendre les formatages du 

document XML pour les sous- 
tites 215 
Exporter le projet After Effects natif 

directement vers Flash 153 
Flash Media Server 210 
Icone de selection de fichier du 

composant FLVPlayBack 171 
Integrer physiquement une video 

dans le scenario 229 
Le composant CaptionButton 

215 

Les formats pris en charge par 
Adobe Media Encoder 156 

Les images-cles 166 

Mecanisme du codec On2 VP6 
162 

Modifier la cadence des images 
165 

Paramete source des composants 

videos 172 
Reconstituer un univers 3D avec 

une video aplatie 174 
Trucage avec captation sur fond 

vert 152 
Utiliser le FLV pour F audio, la 

video ou les deux 161 



Le Campus 

ActionScript 3 * ie motion design 



Programmer facilement la video en HD, la 3D, le relief, les 
Tweens... dans le scenario ! 

Vous etes graphiste et debutez en ActionScript 3 ou utilisez deja 
ActionScript 2. Vous aimeriez controler les contenus et profiter des 
performances de ce nouveau langage directement dans le scenario 
de Flash. Ce livre est fait pour vous ! 

Vous y trouverez des solutions nouvelles, concretes et cles en main. 
Vous y acquerrez les notions d'ActionScript indispensables pour 
pouvoir concevoir, sans I'aide d'un developpeur, des interfaces 
sophistiquees et dynamiques a partir de symboles places dans le 
scenario. 

Sont abordes de facon claire et didactique : la video en qualite 
HD avec toute I'interactivite, la 3D native, I'animation, les classes 
d'animation Tweens etTweenMax, les effets et les filtres, la gestion 
de documents imbriques desormais plus complexe. Mais aussi de 
nombreux concepts inedits.comme le referencement de documents 
Flash, le relief, I'animation de squelettes et la 3D avec PaperVision. 

Plus qu'un livre d'apprentissage, cet ouvrage rassemble toutes les 
techniques qu'un bon web designer doit aujourd'hui connaitre. Un 
outil indispensable en production. 




• Les animations en ActionScript 

• Interpolations et interactivity avec 
les classes Tween etTweenMax 

• Les transitions d'effets et de 
filtres 

• La programmation de squelettes 

• Les galeries d'images 

• La video standard et composite 
en FLV 

• La video HD en F4V 

• La video interactive 

• La 3D native 

• La 3D et PaperVision 

• API d'affichage et de colorimetrie 

• Le Web en vrai relief 

• Les systemes de navigation 
avances 

• La communication Flash/HTML 

• La gestion de sites Full Flash 

• Les solutions de referencement 
du Flash 

• L'accessibilite dans Flash 

• Ressources 
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